Vue.js 3 html dynamic class passing arguments based on computed property

Question

I use a dynamic class in Vue 3.

In template

// 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>

In setup()

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

So far so good.

Now I want to send a variable to my computed property to have the class dynamic. By design Vue computed properties does not take an argument. Functions do, but when making it a function it's no longer reactive.

How can I solve it?

Boussadjra Brahim · Accepted Answer · 2020-12-11 21:11:58Z

1

I recommend to make a computed property based on that store data by adding a field that contains the color :

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

then loop through that property :

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

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

in Tailwindcss the string concatenation is not recommended because the purge css will remove that classes. learn more

edited Dec 11, 2020 at 21:11

answered Dec 11, 2020 at 20:43

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js 3 html dynamic class passing arguments based on computed property

In template

In setup()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

In template

In setup()

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related