Rendering Lists in VueJs

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

by sandfresh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <ul>
    <li v-for="item in inventory" v-on:click="greet">
      {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

JavaScript

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
      }
    ]
  },
  methods: {
    greet: function(event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
});