Vue.js 3 html 动态 class 根据计算 属性 传递参数

Question

我在 Vue 3 中使用动态 class。

在模板中

// Within a loop
<div v-for="(item, index) in store.state.data" :key="`data-${index}`">
  <!-- I want to send item as an argument -->
  <div :class="myComputed"></div>
</div>

在设置中()

const myComputed = computed(() => {
  const number = 500;
  return `bg-red-${number}`;
});

到目前为止一切顺利。

现在我想将一个变量发送到我计算的 属性 以获得 class 动态。按照设计，Vue 计算属性不带参数。函数可以，但是当把它变成一个函数时，它就不再是反应式的了。

我该如何解决？

Answer 1

我建议通过添加包含颜色的字段来根据该商店数据进行计算 属性：

const myData= computed(() => {
 return store.state.data.map(item=>{
         return   {...item,bgColor:`bg-red-${item.number}`};
     })
});

然后遍历 属性 :

<div v-for="(item, index) in myData" :key="`data-${index}`">

  <div :class="item.bgColor"></div>
</div>

在 Tailwindcss 中不推荐字符串连接，因为清除 css 会删除 类。 learn more