VueJS：如何获取表格中复选框选中行的数据

别担心，基础问题都是学习过程中必经的环节，我来帮你一步步搞定这个需求！

你的代码存在的问题 #

原来的代码里没有把复选框的选中状态和数据做绑定，也没有关联到每行的具体item，所以点击按钮时无法获取到选中的行数据。另外，循环里的复选框使用了固定的id="defaultCheck"，这会导致DOM元素id重复，不符合规范，也会影响label的关联效果。

完整实现示例 #

下面是修改后的完整代码，包含选中行数据的获取和Axios发送的逻辑：

模板部分

<form>
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Status</th>
        <th scope="col">Keyword</th>
      </tr>
    </thead>
    <tbody>
      <!-- 用index或者item的唯一标识生成唯一id，避免重复 -->
      <tr v-for="(item, index) in msg" :key="index">
        <td>
          <input 
            type="checkbox" 
            :id="`defaultCheck-${index}`" 
            name="example2"
            v-model="selectedItems" 
            :value="item" <!-- 将当前行的item作为复选框的value -->
          >
          <label :for="`defaultCheck-${index}`"></label>
        </td>
        <td>{{item.Keyword}}</td>
      </tr>
    </tbody>
  </table>
  <button type="button" v-on:click="getFormValues">Submit</button>
</form>
<p>选中的数据：{{ selectedItems }}</p>

脚本部分

import axios from 'axios';

export default {
  name: 'Keywords',
  data() {
    return {
      msg: [
        // 模拟测试数据，实际项目可替换为接口返回数据
        { Keyword: 'Vue.js', id: 1 },
        { Keyword: 'Axios', id: 2 },
        { Keyword: 'JavaScript', id: 3 }
      ],
      selectedItems: [], // 存储选中的行数据
      output: ''
    };
  },
  methods: {
    async getFormValues() {
      // 判断是否有选中项
      if (this.selectedItems.length === 0) {
        this.output = '请至少选择一行';
        return;
      }

      try {
        // 用Axios发送选中的数据到后端接口
        const response = await axios.post('/your-api-url', {
          selectedData: this.selectedItems
        });
        this.output = '数据发送成功！';
        console.log('接口返回结果:', response.data);
      } catch (error) {
        this.output = '数据发送失败，请重试';
        console.error('发送错误:', error);
      }
    }
  }
}

关键说明 #

1. 复选框绑定：通过v-model="selectedItems"把复选框和数组绑定，Vue会自动维护这个数组——选中时将value对应的item加入数组，取消选中时移除。
2. 唯一id处理：用:id="defaultCheck-${index}"为每个复选框生成唯一id，确保label和复选框正确关联。
3. Axios发送：在getFormValues方法中，直接把selectedItems作为请求体的一部分发送给后端，记得替换成你实际的接口地址/your-api-url。
4. 错误处理：加入了基本的错误捕获和提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Javi DR