if posible insert elements to mapping array into html element like this?

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

i use the directive to render a list of items based on an array.

<ul id="example-1">
  <li v-for="item in items">
    <div class ="{{ item.message }}">
    </div>
  </li>
</ul>

and vue throw me this:

<ul id="example-1">
  <li>
    <div class ="{{ item.message }}">
    </div>
    <div class ="{{ item.message }}">
    </div>
  </li>
</ul>

how can I do that with vue?

1 Answers 11

up vote 0 down vote accepted

Your syntax is off; Don't use {{}} in attributes, use v-bind directive or : for short:

<ul id="example-1">
  <li v-for="item in items">
    <div v-bind:class ="item.message">
    </div>
  </li>
</ul>

or simpler:

<ul id="example-1">
  <li v-for="item in items">
    <div :class ="item.message">
    </div>
  </li>
</ul>

Not the answer you're looking for? Browse other questions tagged or ask your own question.