Как я могу сделать все флажки «отмечены» по умолчанию

Question

Как я могу гарантировать, что по умолчанию все по флажкам (вывод из моих данных) все проверены по умолчанию при загрузке?

Выходной флажок

<div v-for="(category, index) in remove_category_duplicates" class="form-check">
    <input type="checkbox" class="form-check-input" v-model="cat_data" :id="category" :value="category">
    <label class="form-check-label">{{ category }}</label>
</div>

Установка флажка значений из данных

    remove_category_duplicates: function () {
        // Get all categories and remove duplicates
        let data = {}
        this.info.forEach(i=>{
            Object.assign(data,i.category_data);
        })

        return data;
    },

Данные:

{
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
},

CodePen : https://codepen.io/anon/pen/XxNORW?editors=1011

Спасибо

Answer 1

Чтобы инициализировать флажки в true / флажок, их массив v-model (cat_data) должен содержать значение true каждого флажка.В этом случае это будет:

["Team", "Questions", "Queries", "Fax"]

Вот как я бы обновил ваш код:

1. Добавьте вычисленное свойство , чтобы вернутьмассив доступных категорий:

   computed: {
     categories() {
       const cats = this.remove_category_duplicates;
       return Object.keys(cats).map(k => cats[k]);
     }
   }
   

2. Обновление select() для установки cat_data на основе selectAll.Если selectAll истинно, установите cat_data в массив категорий, вычисленный выше (таким образом отмечая все отмеченные флажки), или в противном случае пустой массив (таким образом снимая флажки со всех полей):

   methods: {
     select() {
       this.cat_data = this.selectAll ? this.categories : [];
     }
   }
   

3. Добавьте метод (например, с именем «toggleSelectAll») для переключения selectAll в зависимости от того, установлены ли все флажки, сохраняя флажок Выбрать все синхронно с состоянием других флажков:

   methods: {
     toggleSelectAll(e) {
       const checked = e.currentTarget.checked;
       if (checked) {
         this.selectAll = this.arrayContains(this.categories, this.cat_data);
       } else {
         this.selectAll = false;
       }
     }
   }
   

4. Добавить обработчик change на каждый флажок (кроме поля Выбрать все ), который вызывает toggleSelectAll, определенный выше:

   <div v-for="category in remove_category_duplicates">
     <input type="checkbox" @change="toggleSelectAll">
   

демо