Я использую динамический класс в Vue 3.
// 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}`;
});
Все идет нормально.
Теперь я хочу отправить переменную в мое вычисляемое свойство, чтобы класс был динамическим. По дизайну вычисляемые свойства Vue не принимают аргумент. Функции работают, но когда они становятся функциями, они больше не являются реактивными.
Как я могу это решить?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я рекомендую создать вычисляемое свойство на основе данных этого хранилища, добавив поле, содержащее цвет:
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 конкатенация строк не рекомендуется, потому что purge css удалит эти классы. узнать больше