Vue.js styles do not change when adding a new element to an array displayed in v-for

Question

I am new in Vue.js. I need to display an array of elements. Each element contains information about the user, including the color in which I need to display div.

<template>
    <ul>
        <li v-for="(result, index) of results" :key="index">
            <div v-bind:style="{ color: result.color }">
                user info
            </div>  
        </li>
    </ul>
</template>

When adding a new element to the beginning of the array, the list of divs seems to be cached. For example, i have some divs:

<li>
    <div v-bind:style="{ color: user1.color }">
        User1 info
    </div>  
</li>
<li>
    <div v-bind:style="{ color: user2.color }">
        User2 info
    </div>  
</li>

And then i add new element:

    <li>
        <div v-bind:style="{ color: user1.color }">
            User3 info
        </div>  
    </li>
    <li>
        <div v-bind:style="{ color: user1.color }">
            User1 info
        </div>  
    </li>
    <li>
        <div v-bind:style="{ color: user2.color }">
            User2 info
        </div>  
    </li>

That is, the style of new item remains from the previous user. When you reload the page, the styles are displayed normally. This only happens on large arrays.

Data is added to the array this way:

vm.results.unshift.apply(vm.results, dataResult);

Where could there be a mistake?

Or perhaps see this question and try one of those methods and see if they make the array reactive. — AlexH
– AlexH, Commented Jun 10, 2020 at 19:52
I think you should use in instead of of in <li v-for="(result, index) of results" :key="index"> — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 10, 2020 at 19:53
@AlexH, vm.results.unshift.apply(vm.results, dataResult) is inside of setInterval function. — Daria Korosteleva
– Daria Korosteleva, Commented Jun 10, 2020 at 19:55
A solution I've seen is assigning this to a variable before the setInterval, then using that variable in place of this inside the setInterval. Something like this: var that = this; setInterval(() => {... that ...}, interval). — AlexH
– AlexH, Commented Jun 10, 2020 at 19:59

Daria Korosteleva · Accepted Answer · 2020-06-11 20:36:45Z

1

The problem was that color may be empty. In that case div contains an empty style and when adding a new element, it is assigned the style of the previous element.

To solve the problem it was necessary to add a default color:

<template>
<ul>
    <li v-for="(result, index) of results" :key="index">
        <div v-bind:style="[result.color != undefined ? {color: result.color} : {color: black}]">
            user info
        </div>  
    </li>
</ul>

answered Jun 11, 2020 at 20:36

Daria Korosteleva

1712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Boussadjra Brahim Over a year ago

Good, it's an interesting issue thanks for sharing the solution

Collectives™ on Stack Overflow

Vue.js styles do not change when adding a new element to an array displayed in v-for

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related