Javascript 如何在VueJS上使用创建复选框列表？

我必须根据数据中的数组创建一个复选框列表。但我有两个问题

一,。我只能选择第一个复选框，当我点击其他复选框时，唯一更改的值是第一个复选框的列表

二,。我无法获取@change函数，当我更改复选框的值时，不会触发该函数

<template>
...
<slot
  v-for="(termo, index) in termos"
  v-bind="termo"
  >
  <generic-check-box
    class="terms"
    input-id="termos[index].id"
    v-model="termos[index].term"
    :value="termos[index].term"
    @change="checkBoxChanged(index)"
    >
    <generic-text
      color="gray"
      class="condition"
    >{{ termos[index].message }}
    </generic-text>
  </generic-check-box>
</slot>
</template>

<script>
export default {
  components: {
    'close-button': CloseButton,
    'generic-button': GenericButton,
    'generic-check-box': GenericCheckBox,
    'generic-combo-box': GenericComboBox,
    'generic-title': GenericTitle,
    'generic-text': GenericText,
    'off-canvas-buttons': OffCanvasButtons
  },
  data () {
    return {
      termos: [
        { id: 0, term: true, message: 'Message 1' },
        { id: 1, term: false, message: 'Message 2' },
        { id: 2, term: false, message: 'Message 3' },
        { id: 3, term: false, message: 'Message 4' }
      ]
    }
  },
  methods: {
    checkBoxChanged (index) {
      console.log('checkBoxChangled: ' + index + ' ' + this.termos[index].term)
    }
  }
}
</script>

编辑

---

主要问题是这一行：

input-id="termos[index].id"

它需要一个：在前面：

:input-id="termos[index].id"

否则，将为所有复选框将输入id设置为字符串“termos[index].id”。然后，该字符串将用作输入的id和标签的id。单击任何标签时，它将仅触发具有该id的第一个输入

---

我还要注意，您的通用复选框组件似乎没有定义值。另一个组件试图同时使用value和v-model，但如果没有value prop，它们将无法传递值。

因为它是自定义复选框，如果您可以提供组件的代码，那就太好了。要获取HTML复选框的更改事件，而不是组件，请将.native修饰符添加到@change.native。现在调用该方法，它就可以工作了。组件是私有的，我无法共享代码，但是如果有任何方法可以使用复选框列表，我可以工作。我看到了，您现在面临的问题是什么？我无法选择其他复选框，只选择了第一个复选框。在checkBoxChanged函数中，我看到：当我点击任意复选框时，checkBoxChangled:0 true或checkBoxChangled:0 false。示例：当我点击第三个复选框时，第一个复选框被选中。@skirtle是否回答了帮助？这肯定有帮助：