JSFiddle - React, Tailwind, and code Playground

by Nikita K

HTML

<div id="app">
  <todo-list :todos="todos" @delete="onTodoDelete"></todo-list>
  
  <input v-model="todoName" @keypress.enter="onAddTodoClick" /> <button @click="onAddTodoClick" :disabled="!todoName">Add todo</button>
</div>

TypeScript

const TodoList = Vue.component('todo-list', {
	template: '<ul><li v-for="(todo, index) in todos" :key="index">{{ todo.name }} <button @click="onTodoDeleteClick(index)">x</button></li></ul>',
  props: {
  	todos: Array
  },
  methods: {
    onTodoDeleteClick (index: number) {
      this.$emit('delete', index);
    }
  }
});

new Vue({
	el: '#app',
  components: { TodoList },
  data() {
  	return {
      todoName: '',
    	todos: []
    }
  },
  methods: {
  	onAddTodoClick() {
      if (!this.todoName) {
      	return;
      }
    
    	this.todos.push({
      	name: this.todoName
      });
      
      this.todoName = '';
    },
    onTodoDone(index: number) {
    	this.todos.splice(index, 1);
    }
  }
})