Vuejs使用vuex数据将反应式样式设置为v-for中的组件

Question

不知道如何处理。。。我显示表格行，使用vuex提取数据。样式会更改，但不会在浏览器中更新。只有在重新加载或重新创建零部件时，它才会显示样式更改。我想知道，根据v-for组件中加载的数据，设置一个三元反应式风格的最佳方法是什么？

<tr @click="rowClick(item)" v-for="(item, index) in List" :style="[item.completed ? { 'background-color': 'red' } : { 'background-color': 'blue' }]" :key="index">

item.comcompleted是一个bool

Answer 1

我希望我能够正确地反映您试图实现的目标。我在template标记上使用了v-for，在这一行之后，您可以访问item.completed布尔值。我不得不在tr中使用span元素来应用样式。

Vue.createApp({
data() {
return {
List: [ // comes from your vuex
{
name: 'one',
completed: true,
},
{
name: 'two',
completed: false,
}
]
}
},
methods: {
rowClick(item) {
console.log(item)
}
}
}).mount('#demo')

<script src="https://unpkg.com/vue@next"></script>
<table id="demo">
<template v-for="(item, i) in List">
<tr>
<span @click="rowClick(item)" :style="item.completed ? { 'background-color': 'red' } : { 'background-color': 'blue' }">{{ i }}: {{ item.name }}</span>
</tr>
</template>
</table>

我觉得这个问题可以解决得更干净一点。你觉得怎么样？它的方向正确吗？