JSFiddle - React, Tailwind, and code Playground

by zarutofu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id="vue-instance">
  <button @click="add">
    add
  </button>
  <ul>
    <Item v-for="item in items" :item="item.name" :key="item.id">a</Item>
  </ul>
</div>

JavaScript

Vue.component('Item',{
	name: 'Item',
  props: ['item'],
  template: '<p>{{ item }}</p>',
  created: function () {
  	// ???
  	console.log("created = " + this.item)
  }
});

var vm = new Vue({
  el: '#vue-instance',
  data: {
    items: [{
    	id: 1,
      name: 'MacBook Air'
    }, {
    	id: 2,
      name: 'MacBook Pro'
    }, {
    	id: 3,
      name: 'Lenovo W530'
    }, {
    	id: 4,
      name: 'Acer Aspire One'
    }]
  },
  methods: {
  	add: function () {
    	var latestID = this.latestID() + 1
    	var newItem = {
      	id: latestID,
      	name: 'new item ' + latestID
      }
    	this.items.unshift(newItem)
    },
    latestID: function () {
      return Math.max.apply(null, this.items.map(function (o) { return o.id }))
    }
  }
});