Установка флажка программно не отображает изменения при использовании вложенных массивов с объектами

Question

сеУ меня есть массив с категориями.У каждой категории есть дочерние элементы.

Когда родитель отмечен / не отмечен, его дочерние элементы также должны быть отмечены / не отмечены.Если проверены все дети, родитель также должен быть проверен.

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

Вот мой код:

<template>
    <div class="card">
            <div class="card-body">
                    <ul class="list-tree">
                        <li v-for="category in categories" :key="category.id" v-show="category.show">
                            <div class="custom-control custom-checkbox">
                                <input :id="'category-' + category.id"
                                             v-model="category.checked"
                                             @change="checkParent(category)"
                                             type="checkbox"
                                             class="custom-control-input" />
                                <label class="custom-control-label"
                                             :for="'category-' + category.id">
                                    {{ category.name }}
                                </label>
                            </div>
                            <ul>
                                <li v-for="child in category.children" :key="child.id" v-show="child.show">
                                    <div class="custom-control custom-checkbox">
                                        <input :id="'category-' + child.id"
                                                     v-model="child.checked"
                                                     @change="checkChild(child, category)"
                                                     type="checkbox"
                                                     class="custom-control-input" />
                                        <label class="custom-control-label" :for="'category-' + child.id">
                                            {{ child.name }}
                                            <small class="counter">({{ child.products_count }})</small>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
    </div>
</template>

export default {

    data () {
        return {
            categories: [],
            listItemTemplate: { show: true, markedText: null, checked: false }
        }
    },

    methods: {

        checkParent (category) {
            category.children.forEach(child => {
                child.checked = category.checked
            })
        },            

        initializeCategories () {
            this.categories = []

            this.originalCategories.forEach(originalCategory => {
                var parent = this.copyObject(originalCategory)

                this.categories.push(parent)

                parent.children.forEach (child => {
                    child = this.copyObject(child)
                })
            })
        },

        copyObject (category) {
           return Object.assign(category,   {...this.listItemTemplate})
        }
    },

    computed: {
        ...mapState({
             originalCategories: state => state.categories,
        })

     },

     mounted () {
        this.initializeCategories()
     }

}

Answer 1

Я исправил это.Проблема не была связана с флажками вообще.Проблема была связана с тем, как я создал массив категорий.

Когда я инициализирую компонент, я копирую массив из vuex и добавляю новые свойства (например, checked), чтобы проверять дочерние элементы при проверке родителя.Я не следовал правилам для добавления новых полей , поэтому дети не реагировали и не проверялись при проверке родителя.

Большое спасибо за ваши усилия, чтобы помочь мне!

Answer 2

Вам необходимо расширить область действия, поскольку вы изменяете ее только в методе checkParent(), переменные, в которые вы вносите изменения, не будут влиять на переменные компонентов.

Используйте индекс вместо значения в итерации категорий, чтобы найти правильную категорию, а затем примените изменения в области действия всего компонента:

<li v-for="(category, categoryIndex) in categories" :key="category.id" v-show="category.show">
     <div class="custom-control custom-checkbox">
                                    <input :id="'category-' + category.id"
                                                 v-model="category.checked"
                                                 @change="checkParent(categoryIndex)"
                                                 type="checkbox"
                                                 class="custom-control-input" />
                                    <label class="custom-control-label"
                                                 :for="'category-' + category.id">

                                    {{ category.name }}     
                     </label>
              </div> <!-- the rest of the code ... -->

А затем в методе компонента:

methods: {

    checkParent (categoryIndex) {
       let categoryChecked = this.categories[categoryIndex];
        this.categories[categoryIndex].children.forEach((child, childIndex) => {
            this.categories[categoryIndex].children[childIndex].checked = categoryChecked;
        })
    },