Как очистить входное значение после отправки его в Vuejs?

Question

Я делаю список дел в Vuejs.Когда я ввожу новое значение в поле ввода, кажется, что я не могу сделать это значение для сброса.Как мне это сделать?

Я пытался захватить входное значение и сбросить его до пустой строки, но мне не повезло.

HTML-код:

<div id="app">
  <h1>{{ message }}</h1>
  <form v-on:submit="addNewTodo">
    <input class="input-value" v-model="todo.task" type="text">
    <button type="submit">Add todo</button>
  </form>
  <ul>
   <li  v-for="todo in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
    {{ todo.task }} <span v-on:click="deleteTodo">{{ todo.delete }}</span>
   </li>
  </ul>
</div>

JS-код:

var app = new Vue({
  el: '#app',
  data: {
    message: 'List of things to do today',
    todos: [
      { task: 'Have breakfast', delete:'(x)'},
      { task: 'Go to the gym', delete:'(x)'},
      { task: 'Study Vuejs', delete:'(x)'}
    ],
    todo: {task: '', delete: '(x)'}
  },
  methods: {
    addNewTodo: function(e){

      e.preventDefault();
      this.todos.push( this.todo );

      var inputValue = document.querySelectorAll('.input-value').value;

      inputValue = ''
    },
    deleteTodo: function(){
      this.todos.shift( this.todo )
    }
  }
});

Answer 1

Попробуйте сбросить как:

  addNewTodo: function(e){

      e.preventDefault();
      this.todos.push( this.todo );
      this.todo.task=""
    }

Answer 2

Ваше входное значение имеет двустороннюю привязку с todo.task, поэтому вы можете сделать следующее после добавления новой задачи todo.

this.todo.task = ''