Vue 只允许数组中的一个元素为真

Question

我在 vue 中创建了多个带有复选框的输入字段，我希望只有一个可以为真。 因此，如果用户点击一个其他的应该是假的，这样只有最后一次点击的复选框是真的。

我的代码是这样的：

new Vue({
  el: "#app",
  data: {
      selected: null,
      options: [
          {"id": 1, "title": "One", "value": false},
          {"id": 2, "title": "Two", "value": false },
          {"id": 3, "title": "Three", "value": false},
      ]
  },
  watch: {
    selected(selected) {
      this.options.forEach((option, index) => {
        option.id == selected ? option.value = true : option.value = false;
      });
    }
  }

不幸的是，我的观察者工作不正常。 如果有人能告诉我如何纠正它，我会很高兴。 我希望最后一个真正的元素总是唯一的真正元素，手表将选项中的所有其他元素设置为假。

Answer 1

如果我正确理解了您的要求，您仍然可以使用单选按钮来完成。 您可以指定要在selected变量中使用的值，如下所述： https://v2.vuejs.org/v2/guide/forms.html#Radio-1 。 这意味着您可以设置一个观察者，然后相应地改变选项列表：

selected: function (newVal) {
    this.options.forEach(option => {
      if (option.id === newVal) option.value = true
      else option.value = false
    })
    console.log(this.options)
}

这是一个沙箱，可以看到它的实际效果： https://codesandbox.io/s/heuristic-goldberg-lilsw

更新：刚刚看到你想使用 buefy 的</b-switch> 。 您仍然可以通过从input事件调用 function 来执行类似的操作，然后根据刚刚更改的元素更改选项列表。 像这样的东西：

<div v-for="(option,index) in options" :key="index">
      <div class="box">
        <div class="field">
           <b-switch v-model="option.value" @input="(modelValue) => onSwitchChanged(modelValue, option.id)">
            {{ option.title }}
           </b-switch>
          <label :for="index">{{ option.title }}</label>
        </div>
    </div>
</div>

function onSwitchChanged(modelValue, id) {
    if (!modelValue) return
    this.options.forEach(option => {
      if (option.id === id) option.value = true
      else option.value = false
    })
}

Answer 2

如果您希望只选择一个，那么您必须使用radio按钮。 Checkbox具有 select all But One by One 的选项。

没有watch你可以使用methods 。 将索引传递给方法。

<input 
   type="checkbox"
   :id="index" 
   :value="option.id" 
   @click="selectAnOption(index)"
>

方法：

methods: {
  selectAnOption(index) {
   this.options[index].value = true
  }
}

完整代码在这里： https://jsfiddle.net/8ktdp9ew/