VueJS动态表格：点击按钮传递该行输入框值的实现方法

嘿，这问题我之前也踩过坑！你的核心问题在于没把输入框和当前行的绑定关系理清楚，而且点击按钮时没传递当前行的上下文，导致没法拿到每行的独立值。我给你调整下代码，保证能完美解决：

修改后的HTML代码 #

<tr v-for="(item, index) in items" :key="index">
  <!-- 其他数据 -->
  <td><input v-model="item.item1"></td>
  <td><input v-model="item.item2"></td>
  <td><button @click="doSomething(item)">send</button></td>
</tr>

修改后的JavaScript代码 #

export default {
  data() {
    return {
      // 初始化items数组，每个元素要包含对应输入框的属性
      items: [
        { item1: '', item2: '' },
        { item1: '', item2: '' }
        // 后续可以根据需求动态新增行
      ]
    }
  },
  methods: {
    doSomething(currentItem) {
      // 直接拿到当前行的输入值
      const inputVal1 = currentItem.item1;
      const inputVal2 = currentItem.item2;
      console.log('当前行输入内容：', inputVal1, inputVal2);
      // 这里写你的请求逻辑就好啦
    }
  }
}

关键改动说明 #

• 绑定行内独立数据：把v-model="item1"改成v-model="item.item1"，这样每个输入框的值都会存在当前循环的item对象里，彻底实现每行数据的独立性，不会互相干扰。
• 传递当前行上下文：点击按钮时把item作为参数传给doSomething方法，不用再去DOM里找输入框，直接通过参数就能拿到该行的所有输入值，完全符合Vue的响应式设计思路。

如果你的items是从后端接口获取的，记得确保每个item对象都有item1和item2属性（如果没有的话，可以在获取数据后给每个item手动添加这两个空属性）。

内容的提问来源于stack exchange，提问作者Alauddin Ahmed