使用 VueJS 3 在更改时获取所有选定的值

Question

我的组件中有这些行：

        <li
          v-for="(c, i) in choice[messagesRobot[numMessage].choice]"
          :key="`choice-${choice[messagesRobot[numMessage].choice]}-${i}`">
          <input
            @change="changeValue($event, messagesRobot[numMessage].choice)"
            :value="c.id"
            type="checkbox"
            :name="choix[messagesRobot[numMessage].choice]"
            :id="`c-${choix[messagesRobot[numMessage].choice]}-${i}`">
          <label :for="`c-${choix[messagesRobot[numMessage].choice]}-${i}`">
            {{ c.nom }}
          </label>
        </li>

如您所见，有很多计算属性。我想要的是在用户更改值时更新模型。问题是我不能使用像:v-model="xxx" 这样的东西，所以我必须捕获@change 事件。我是这样写的：

function changeValue(e, v) {
  console.log(v);
  console.log(JSON.stringify(e.target.value));
}

第二行只给了我用户选择或取消选择的最后一个元素，我想要的是在一个数组中获取所有复选框的值，就像我可以使用 v-model 一样。

提前感谢您的帮助:)

Answer 1

我认为你可以这样做

        <li
          v-for="(c, i) in choice[messagesRobot[numMessage].choice]"
          :key="`choice-${choice[messagesRobot[numMessage].choice]}-${i}`">
          <input
            @change="changeValue($event, messagesRobot[numMessage].choice, i)"
            :value="c.id"
            type="checkbox"
            :name="choix[messagesRobot[numMessage].choice]"
            :id="`c-${choix[messagesRobot[numMessage].choice]}-${i}`">
          <label :for="`c-${choix[messagesRobot[numMessage].choice]}-${i}`">
            {{ c.nom }}
          </label>
        </li>

  data() {
    return {
      valuesArray: []
    }
  }

function changeValue(e, v, index) {
  this.valuesArray[index] = e.target.value;
  console.log(v);
  console.log(JSON.stringify(e.target.value));
}

那么您的valuesArray 将具有所有检查值。 为什么不能只使用v-model？