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://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Answer 2

除了其他人所说的以外，我不禁感到您在稍微复杂化这一点。您已经在遍历对象(quotes)，为什么不对它们应用活动属性呢？

HTML

<div
        v-for="(quote, i) in quotes"
        :key="i"
        @click="del(quote)"
        :class="{active: quote.active}"
        class="quote col-3"
>
    {{ quote }}
</div>

方法更改

del(quote) {
    quote.active = !quote.active;
}

新CSS

.quote.active{
    background-color: red;
}