v-for

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

  <div id="vue-instance">
     <ul>
      <li v-for="item in inventory">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/vue/2.1.6/vue.js"></script>

  <script>
    var vm = new Vue({
      el: '#vue-instance',
      data: {
        inventory: [
          {name: 'MacBook Air', price: 1000},
          {name: 'MacBook Pro', price: 1800},
          {name: 'Lenovo W530', price: 1400},
          {name: 'Acer Aspire One', price: 300}
        ]
    }
  });
  </script>

  </body>
</html>

Sometimes you may want to access the index of your loop:

<div id="vue-instance">
  <ul>
    <li v-for="(item, index) in inventory">
      {{ index }} - {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

results matching ""

    No results matching ""