javascript - Vue 事件类 v-for

Question

我有一个关于 v-for 的问题。为什么我必须返回 this.activeClass = {...this.activeClass} 才能更新组件？为什么组件在此行之后没有更新。

if (this.activeClass[index]) {
                this.activeClass[index] = false;
            } else {
                this.activeClass[index] = true;
            }

我想在单击 v-for 元素时将背景设置为红色

模板:

 <template>
        <div class="container">
            <div class="row mt-5">
                <div
                    v-for="(quote, i) in quotes"
                    :key="i"
                    @click="del(i)"
                    :class="{red: activeClass[i]}"
                    class="quote col-3"
                >
                    {{ quote }}
                </div>
            </div>
        </div>
    </template>

脚本:

<script>
export default {
    props: ["quotes"],
    data: function() {
        return {
            activeClass: {}
        };
    },
    methods: {
        del(index) {
            if (this.activeClass[index]) {
                this.activeClass[index] = false;
            } else {
                this.activeClass[index] = true;
            }
            this.activeClass = {...this.activeClass};
        }
    }
};
</script>

Answer 1

Vuejs 对深层对象不具有反应性。看https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats