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

Question

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

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

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 属性，它们将不会传递值。

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

How to make a CheckBox list using <slot v-for> on VueJS?

javascript

vue.js

v-for