Vue JS单选按钮切换所有场景

Question

所以我知道如何切换组中的所有单选按钮，但我这里有一个小众案例。我将尽我所能用代码和 cmets 来解释。

SomeComponent.vue

<template>
    <div>
        <!-- This checkbox will toggle the selected stated of all radios -->
        <input class="toggleAll" type="checkbox" :checked="checked" @change="toggleAll">

        <!-- These will either toggle their own checked state or
        IF the above checkbox has been checked and all checkbox are selected, it would remove the 
        checked state from that one
        as not all the radios ARE selected anymore -->
        <input :checked="checked" class="radio" type="checkbox">
        <input :checked="checked" class="radio" type="checkbox">
        <input :checked="checked" class="radio" type="checkbox">
         <input :checked="checked" class="radio" type="checkbox">
    </div>
</template>

<script>

    export default {
        name: 'SomeComponent',
        data() {
            return {
                checked: false,
            }
        },
        methods: {
            toggleAll() {
                this.checked = !this.checked;
            }
        }
    }
</script>    

所以基本上，具有 toggleAll 类的输入将选中/取消选中所有复选框。但是，选中其他任何一个都应该取消选中您单击加toggleAll复选框的那个，因为不再选中所有复选框。

我似乎无法让它工作！我基本上需要说用 toggleAll 类查找输入并将数据“检查”更改为 false 但我不知道该怎么做。

TIA

Answer 1

如果您对checked 状态没有任何特定偏好，我建议您使用布尔值列表并切换它们各自的状态（使用Vue.set 来克服array change detection caveat）。

下面的示例使用computed setter/getter 响应式地判断是否所有复选框都已选中，并在调用 setter 时立即切换它们。

顺便说一句，我添加了一个额外的属性 (indeterminate)，您可能会觉得它有用。

我在“allChecked”复选框上使用.prop 修饰符来告诉Vue 我们想要将此indeterminate 绑定为DOM 属性而不是组件属性。

new Vue({
  el: '#app',
  data() {
    return {
      checkList: [false, false, false, false]
    }
  },
  computed: {
    allChecked: {
      get() {
        return this.checkList.every(Boolean);
      },
      set(isChecked) {
        for (let index = 0; index < this.checkList.length; index++) {
          this.$set(this.checkList, index, isChecked);
        }
      }
    },
    indeterminate() {
      return !this.allChecked && this.checkList.some(Boolean);
    }
  }
})

#app > input[type="checkbox"] {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <label>
  <input 
    v-model="allChecked"
    :indeterminate.prop="indeterminate"
    class="toggleAll" 
    type="checkbox" />
  Check all
  </label>

  <input 
    v-model="checkList[index]" 
    v-for="(checked, index) of checkList" :key="index"  
    class="radio" 
    type="checkbox" />
</div>

Answer 2

您的问题可能来自@change 事件仅在用户与收音机交互并发生变化时触发。另一方面，查看您的代码，您是否尝试使用 checkAll 方法更改主按钮的状态？在那种情况下，@change="toggleAll" 中的 toggleAll 引用是什么？

无论如何，应该这样做：

<template>
    <div>
        <input class="toggleAll" type="checkbox" :checked="checked2" @change="toggleAll">

        <input :checked="checked" @change="toggleMain" class="radio" type="checkbox">
        <input :checked="checked" @change="toggleMain" class="radio" type="checkbox">
        <input :checked="checked" @change="toggleMain" class="radio" type="checkbox">
         <input :checked="checked" @change="toggleMain" class="radio" type="checkbox">
    </div>
</template>

<script>

    export default {
        name: 'SomeComponent',
        data() {
            return {
                checked: false,
                checked2: false
            {
        },
        methods: {
            toggleMain() {
                this.checked2 = false;
            }
            ...
        }
    }
</script>