Vue.js styles 向 v-for 中显示的数组添加新元素时不会更改

Question

我是 Vue.js 的新手。 我需要显示一个元素数组。 每个元素都包含有关用户的信息，包括我需要显示 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>

在数组的开头添加一个新元素时，div 列表似乎被缓存了。 例如，我有一些 div：

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

然后我添加新元素：

    <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>

也就是说，新项目的样式仍然来自以前的用户。 重新加载页面时，styles正常显示。 这只发生在大型 arrays 上。

数据以这种方式添加到数组中：

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

哪里会出错？

Answer 1

问题是颜色可能是空的。 在这种情况下， div 包含一个空样式，并且在添加新元素时，它被分配了前一个元素的样式。

为了解决这个问题，有必要添加一个默认颜色：

<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>