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.completed 是一个布尔值

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>

我认为它可以解决得更干净一些。你怎么看？方向是否正确？