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/