清除 vuejs 表单中的输入

Question

刚刚完成了一个 todolist 教程。提交表单时，输入字段不清除。

在尝试两者之后：

     document.getElementById("todo-field").reset();
    document.getElementById("#todo-field").value = "";

输入字段正确清除，但它也删除了待办事项。

它似乎在有时间将新的 todo 推送到 todos.text 数组中之前删除了输入字段。

会喜欢一些输入的家伙！谢谢！！

 <template>
  <form id="todo-field" v-on:submit="submitForm">
    <input type="text" v-model="text">
  </form>
     <ul>
       <li v-for="todo in todos">
        <input class="toggle" type="checkbox" v-model="todo.completed">
        <span :class="{completed: todo.completed}" class="col-md-6">
            <label @dblclick="deleteTodo(todo)">
                {{todo.text}}
            </label>
        </span>

       </li>
     </ul>

 <script>
  export default {
    name: 'todos',
      data () {
        return {
          text: '',
          todos: [
          {
      text:'My Todo One',
      completed: false
    },
    {
      text:'My Todo Two',
      completed: false
    },
    {
      text:'My Todo Three',
      completed: false
    }
  ]// End of array
}
  },
    methods: {
    deleteTodo(todo){
        this.todos.splice(this.todos.indexOf(todo),1);
    },
    submitForm(e){
        this.todos.push(
            {
                text: this.text,
                completed: false
            }
        );
        //document.getElementById("todo-field").reset();
        document.getElementById("#todo-field").value = "";

        // To prevent the form from submitting
        e.preventDefault();
    }
}
}
</script>

原文由 Tony 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 submitForm 函数中将 this.text 设置为空字符串：

 submitForm(e){
    this.todos.push(
        {
            text: this.text,
            completed: false
        }
    );
    this.text = "";

    // To prevent the form from submitting
    e.preventDefault();
}

请记住，绑定有两种方式：（输入）视图可以更新（字符串）模型，或者模型可以更新视图。

原文由 Rashad Saleh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这些解决方案很好，但是如果您想减少工作量，则可以使用 $refs

 <form ref="anyName" @submit="submitForm">
</form>

<script>
   methods: {
      submitForm(){
         // Your form submission
         this.$refs.anyName.reset(); // This will clear that form
      }
   }
</script>

原文由 Tushar Roy 发布，翻译遵循 CC BY-SA 4.0 许可协议