Vue 小组件input keyup.enter绑定

Posted 2020-10-26 ThisCall

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

 

Vue.component(\'todo-item\', {
  template: \'\\
    <li>\\
      {{ title }}\\
      <button v-on:click="$emit(\\\'remove\\\')">X</button>\\
    </li>\\
  \',
  props: [\'title\']
})

new Vue({
  el: \'#todo-list-example\',
  data: {
    newTodoText: \'\',
    todos: [
      {
        id: 1,
        title: \'Do the dishes\',
      },
      {
        id: 2,
        title: \'Take out the trash\',
      },
      {
        id: 3,
        title: \'Mow the lawn\'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = \'\'
    }
  }
})