Vue.js 样式在向 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>

也就是说，新项目的样式保留在前一个用户的位置。重新加载页面时，样式将正常显示。这只发生在大型阵列上。

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

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>