vue componente and prop example

by mkdizajn

HTML

<div id="vue-instance">
  <ul>
    <listitem v-for="(item, index) in inventory" :item="item" :key="index"></listitem>
  </ul>
</div>

Babel + JSX

const ListItem = {
  props: ['item'],
  computed: {
    price() {
    	return this.item.price.toFixed(2);
    }
  },
  template: "<li><b>{{ item.name }}</b>: {{ price }}</li>",
}

const VM = new Vue({
  el: '#vue-instance',
  
  components: {
    listitem: ListItem
  },
  
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ]
  }
});