javascript - 如何在 VueJS 上使用 <slot v-for> 制作复选框列表？

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 属性，这些组件不会传入值。