Rendering Lists in VueJs

A demo of rendering lists in VueJs using the v-for directive - http://coligo.io

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <ul>
    <li v-for="(index,item) in inventory" :key="item.name">
      {{ item.name }} - ${{ item.price }}
      <button @click="add">Add</button>
      <button @click="remove(index)">Remove</button>
    </li>
  </ul>


</div>

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
    counter: 1,
    inventory: [{
      name: 'MacBook Air',
      price: 1000
    }, {
      name: 'MacBook Pro',
      price: 1800
    }, {
      name: 'Lenovo W530',
      price: 1400
    }, {
      name: 'Acer Aspire One',
      price: 300
    }]
  },
  methods: {
    add: function() {
      this.inventory.push({
        name: 'item' + this.counter++,
        price: this.counter * 1000
      })
    },
    remove: function(index) {
      this.inventory.splice(index, 1);
    }
  }
});