JSFiddle - React, Tailwind, and code Playground

by knrm720

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h3>Todo {{ todosLeft }}</h3>
  <input v-model="newTodoText" placeholder="add some todo.." @keyup.enter="addNewTodo">
  <ul>
    <li is="todo-item" v-for="(todo, idx) in todos" :key="todo" :title="todo" @remove="todos.splice(idx, 1)">
    </li>
  </ul>
</div>

JavaScript

Vue.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <a href="" @click.prevent="$emit('remove')">[x]</a>
    </li>
  `,
  props: ['title']
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      '牛乳を買いに行く'
    ]
  },
  computed: {
    todosLeft() {
      return this.todos.length
    }
  },
  methods: {
    addNewTodo: function() {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})