请问vue中怎么获取v-for的参数

Question

如图，有复选框和文本，在提交按钮之后，怎么根据选中的多个复选框得到所对应的文本的数组

Answer 1

首先你肯定要在数组里面添加上布尔值的属性绑定到复选框中，然后提交时去过滤属性值为true下的文本就行了,参考一下GPT示例

<template>
  <div>
    <div v-for="(list, index) in List" :key="index">
      <input type="checkbox" v-model="list.checked"> <!-- 使用v-model绑定复选框的选中状态 -->
      {{ list.text }}
    </div>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [
        { text: '文本1', checked: false },
        { text: '文本2', checked: false },
        { text: '文本3', checked: false },
        // 其他列表项...
      ],
      selectedTexts: [] // 存储选中的文本
    };
  },
  methods: {
    handleSubmit() {
      this.selectedTexts = []; // 清空选中的文本数组
      for (let i = 0; i < this.List.length; i++) {
        if (this.List[i].checked) { // 如果复选框被选中
          this.selectedTexts.push(this.List[i].text); // 将对应的文本添加到数组中
        }
      }
      console.log(this.selectedTexts); // 在这里可以访问选中的文本数组，进行后续操作
    }
  }
};
</script>