[Vuejs]-Vue active class v-for

by

3👍

✅

Vuejs is not reactive on deep object. look at https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

👤P-A Bouly

0👍

In addition to what the others have said, I can’t help but feel that you’re over-complicating this slightly. You’re already looping over an object (quotes), why not apply an active property to those instead?

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;
}
👤Lewis

Leave a comment