CODEWITHSUNDEEP
vue.js
theWorstCoderInTheWorld
theWorstCoderInTheWorld

Reputation: 29

how to dynamically setAttribute className in Vue's v-for loop?

I am new in Vue.js. There is my question: I try this:

 <li v-for="(msg,index) in system_message" :class="index">

in order to create different className like 0,1,2,3 for every li element. but v-bind does not work in this way. class name remain empty. how do I use setAttribute function in Vue? thanks!

Upvotes: 1

Views: 92

Answers (2)

Junior Ngangeli
Junior Ngangeli

Reputation: 112

The class attribute can not be a number, you need to concatenate it with a string. Check the code snippet below with the two examples:

new Vue({
  render: h => h({
  data() {
    return {
      system_message: ["Message 1", "Message 2", "Message 3"]
    }
  },
  template: `
    <div>
      <li v-for="(msg,index) in system_message" :class="index">{{msg}}</li>
      <li v-for="(msg,index) in system_message" :class="'class-'+index">{{msg}}</li>
    </div>
  `
}),
}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Numbers are not accepted as classes names, you should concatenate the index with string like :

 <li v-for="(msg,index) in system_message" :class="`item${index}`">

that gives your item0, item1, item2 ...

Upvotes: 1

Related Questions