Vue活动类v-for答案

【问题标题】：Vue active class v-forVue活动类v-for
【发布时间】：2019-04-25 10:20:15
【问题描述】：

我有一个关于 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>

【问题讨论】：

阅读 vue.js 反应性文档：vuejs.org/v2/guide/reactivity.html
将 del(index) 方法更改为：Vue.set(this.activeClass, index, !this.activeClass[index]) 这应该可以解决问题。

标签： javascript vue.js

【解决方案1】：

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

【讨论】：

【解决方案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;
}

【讨论】：