JSFiddle - React, Tailwind, and code Playground

by Yure Pereira

HTML

<div id="todo-list">
  
  <form action="">
    <input type="text" v-model="newItem">
    <input type="button" v-on:click="addTodolist()" value="Add">
  </form>
  
  <ul v-for="(item, index) in itens">
    <li>{{ item.name }} <input type="button" value="x" v-on:click="removeItem(index)"></li>
  </ul>
  <p>{{ countItens }}</p>  
</div>

JavaScript

var app = new Vue({
	el: '#todo-list',
	data: {
  	newItem: '',
  	itens: [
     {id: 0, name: 'PHP'},
     {id: 1, name: 'Java'},
     {id: 2, name: 'Python'}
    ],
    countItens: 3
  },
  methods: {
  	addTodolist: function() {
    
    	this.countItens++;
    	this.itens.push({
      	id: this.countItens,
				name: this.newItem
      });
      this.newItem = '';
      
    },
    removeItem: function(index) {
    	
      this.itens.splice(index, 1);
      this.countItens--;
      
    }
  }
});