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

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

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

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!

CodePudding user response：

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

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

that gives your item0, item1, item2 ...

CodePudding user response：

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" :>{{msg}}</li>
      <li v-for="(msg,index) in system_message" :>{{msg}}</li>
    </div>
  `
}),
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>