Vue活动类v-for

问题描述 投票:0回答:2

我对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>
javascript vue.js
2个回答
2
投票

0
投票

除了其他人所说的之外,我还是忍不住觉得你过于复杂了。你已经在一个对象(quotes)上循环,为什么不将一个活动属性应用于那些呢?

HTML

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

Method Change

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

New CSS

.quote.active{
    background-color: red;
}
© www.soinside.com 2019 - 2024. All rights reserved.