JSFiddle - React, Tailwind, and code Playground

by techyankee

HTML

<div id="app">
  
  <h2>TODO APP</h2>
  <form action="" v-on:submit.prevent>
    <input type="text" v-model="newItem">
    <button v-on:Click="addItem">Add</button>
  </form>
  
  <ul>
    <li v-for="(todo, index) in todos">
      <input type="checkbox" v-model="todo.isDone">
      <span v-bind:class="{ done: todo.isDone}">{{ todo.item }}</span>
      <button v-on:click="deleteItem(index)">Delete</button>
    </li>
  </ul>
  
  
  <pre>{{ $data }}</pre>
</div>




<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

CSS

#app ul {
  list-style: none;
}


#app li > span.done {
  text-decoration: line-through;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  
  methods: {  
  	addItem: function(event) {
      /* alert('aaa'); */
          	
      if(this.newItem == '') return; 

      var todo = {
        item: this.newItem,
        isDone: false
      };

      this.todos.push(todo);
      this.newItem = '';
    },
    
    deleteItem: function(index) {
      // alert(index);
      this.todos.splice(index, 1)
    }
  }


})