如何在VueJS上使用<slot v-for>创建CheckBox列表？

Question

我必须基于data()中的数组创建一个复选框列表。但是我有两个问题。

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

2。。我无法获得@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>

编辑

Answer 1

主要问题是此行：

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

它的前面需要一个:：

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

否则，将所有复选框的input-id设置为字符串'termos[index].id'。然后，该字符串将用作输入的id和标签的for。单击任何标签时，只会触发带有该id的第一个输入。

我还要指出，您的generic-check-box组件似乎没有定义value道具。另一个组件正在尝试同时使用value和v-model，但是如果没有value道具，它们将不会传递值。