JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<div id="app"></div>
<input type="button" id="test" value="update">

JavaScript

const app = new Vue({
 el: '#app',
 template: `
 	<div>
 		<ul>
    	<li v-for="(todo, index) in filterdTodos" :key="index">
      	<label>
        	<input type="checkbox" v-model="todo.isDone">{{ index }} - {{ todo.text }}
        </label>
        <button @click="removeTodo(todo)">x</button>
      </li>
    </ul>
    
    <div>
    	<label v-for="filter in filters" :key="filter">
      	<input type="radio" name="filter-type" :value="filter" v-model="selectedFilter">{{ filter }}
      </label>
    </div>
    <input placeholder="Add your to do." @keyup.enter="addTodo">
    <button @click="removeAllTodos">Remove All</button>
  </div>
	`
	,
 data: {
   todos: [],
   filters: ['all', 'done', 'undone'],
   selectedFilter: 'all'
 },
 methods: {
 	addTodo: function(event) {
  	const todo = event.currentTarget.value.trim()
    if (todo !== '') {
      this.todos.push({ text: todo, isDone: false })
      event.currentTarget.value = ''
    }
  },
  removeTodo: function(todo) {
  	this.todos.splice(this.todos.indexOf(todo), 1)
  },
  removeAllTodos: function() {
  	this.todos.splice(0, this.todos.length)
  }
 },
 computed: {
 	filterdTodos: function() {
  	if (this.selectedFilter === 'all') {
    	return this.todos
    }
    
    return this.todos.filter((todo) => {
    	return todo.isDone === (this.selectedFilter === 'done')
    })
  }
 }
})


document.getElementById('test').addEventListener('click', () => {
  app.$data.message = new Date().getTime().toString();
})