Vue JS Переключатель для переключения всех сценариев

Question

Итак, я знаю, как переключать все переключатели в группе, но у меня есть немного нишевый случай. Я постараюсь объяснить как можно лучше здесь с кодом и комментариями.

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

Если у вас нет особых предпочтений c для состояний checked, я бы рекомендовал использовать список логических значений и переключать их соответствующие состояния (с помощью Vue.set для преодоления предупреждение об обнаружении изменения массива ).

В приведенном ниже примере используется вычисляемый установщик / получатель , чтобы реактивно определить, установлены ли все флажки, и переключать их сразу, когда установщик получает Позвонил.

Кстати, я добавил дополнительный атрибут (indeterminate), который может оказаться полезным.

Я использую .prop модификатор на флажке "allChecked", чтобы сообщить 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? В таком случае, что такое toggleAll ссылка в @change="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>