清除 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>

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();
}

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

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>

Answer 3

假设您有一个很大的表单，或者您不想一个一个地重置每个表单域，您可以通过一个一个地遍历字段来重置表单的所有字段

var self = this;
Object.keys(this.data.form).forEach(function(key,index) {
    self.data.form[key] = '';
});

以上内容会将给定this.data.form 对象的所有字段重置为空字符串。假设您有选择地希望将一两个字段设置为特定值，在这种情况下，您可以轻松地根据 field name

设置条件

if(key === "country") 
   self.data.form[key] = 'Canada';
else 
   self.data.form[key] = ''; 

或者如果您想根据类型重置字段并且在这种情况下您有布尔和其他字段类型

if(typeof self.data.form[key] === "string") 
   self.data.form[key] = ''; 
else if (typeof self.data.form[key] === "boolean") 
   self.data.form[key] = false; 

更多类型信息见here

基本的vuejs 模板和脚本示例如下所示

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <input type="text" class="input" placeholder="User first name" v-model="data.form.firstName">
      <input type="text" class="input" placeholder="User last name" v-model="data.form.lastName">
      <input type="text" class="input" placeholder="User phone" v-model="data.form.phone">
      <input type="submit" class="button is-info" value="Add">
      <input type="button" class="button is-warning" @click="resetForm()" value="Reset Form">
    </form>
  </div>
</template>

请参阅@submit.prevent="onSubmit" 用于表单元素。默认情况下，这将阻止表单提交并调用onSubmit 函数。

假设我们对上述内容有以下内容

<script>
  export default {
    data() {
      return {
        data: {
          form: {
            firstName: '',
            lastName: '',
            phone: ''
          }
        }
      }
    },
    methods: {
      onSubmit: function() {
        console.log('Make API request.')
        this.resetForm(); //clear form automatically after successful request
      },
      resetForm() {
        console.log('Reseting the form')
        var self = this; //you need this because *this* will refer to Object.keys below`

        //Iterate through each object field, key is name of the object field`
        Object.keys(this.data.form).forEach(function(key,index) {
          self.data.form[key] = '';
        });
      }
    }
  }
</script>

您可以从任何地方拨打resetForm，它会重置您的表单字段。

Answer 4

要在一个表单中重置所有字段，您可以使用event.target.reset()

const app = new Vue({
    el: '#app',    
    data(){
	return{        
            name : null,
	    lastname : null,
	    address : null
	}
    },
    methods: {
        submitForm : function(event){
            event.preventDefault(),
            //process...             
            event.target.reset()
        }
    }

});

form input[type=text]{border-radius:5px; padding:6px; border:1px solid #ddd}
form input[type=submit]{border-radius:5px; padding:8px; background:#060; color:#fff; cursor:pointer; border:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<div id="app">
<form id="todo-field" v-on:submit="submitForm">
        <input type="text" v-model="name"><br><br>
        <input type="text" v-model="lastname"><br><br>
        <input type="text" v-model="address"><br><br>
        <input type="submit" value="Send"><br>
    </form>
</div>

Answer 5

标记

<template lang="pug">
  form
    input.input(type='text' v-model='formData.firstName')
    input.input(type='text' v-model='formData.lastName')
    button(@click='resetForm') Reset Form
</template>

脚本

<script>
  const initFromData = { firstName: '', lastName: '' };
  
  export default {
    data() {
      return {
        formData: Object.assign({}, initFromData),
      };
    },
    methods: {
      resetForm() {
        // if shallow copy
        this.formData = Object.assign({}, initFromData);
  
        // if deep copy
        // this.formData = JSON.parse(JSON.stringify(this.initFromData));
      },
    },
  };
</script>

阅读深拷贝和浅拷贝的区别HERE。

Answer 6

我用这个

this.$refs['refFormName'].resetFields();

这对我来说很好。

Answer 7

此解决方案仅适用于组件

如果我们使用布尔值切换（显示/隐藏）组件，那么数据也会被删除。 无需清理表单域。

我通常制作组件并使用布尔值初始化它们。 例如

<template>
    <button @click="show_create_form = true">Add New Record</button
    <create-form v-if="show_create_form" />
</template>


<script>
...
data(){
   return{
       show_create_form:false //making it false by default
   }
},
methods:{
    submitForm(){
      //...
      this.axios.post('/submit-form-url',data,config)
           .then((response) => {
               this.show_create_form= false; //hide it again after success.
               //if you now click on add new record button then it will show you empty form
           }).catch((error) => {
              //
           })
    }
}
...
</script>

当使用点击编辑按钮时，此布尔值变为真，成功提交后我再次将其更改为假。

Answer 8

我遇到了一种情况，我正在使用自定义组件，我需要清除表单数据。

但仅当页面处于“创建”表单状态并且该页面未用于编辑现有项目时。所以我做了一个方法。

我在自定义组件文件的观察器中调用了这个方法，而不是使用自定义组件的 vue 页面。如果这有意义的话。

整个表单 $ref 仅对我在基本自定义组件上可用。

<!-- Custom component HTML -->
<template>
  <v-form ref="form" v-model="valid" @submit.prevent>
    <slot v-bind="{ formItem, formState, valid }"></slot>
  </v-form>
</template>

watch: {
  value() {
    // Some other code here
    this.clearFormDataIfNotEdit(this)
    // Some other code here too
  }
}
... some other stuff ....

methods: {
  clearFormDataIfNotEdit(objct) {
    if (objct.formstate === 'create' && objct.formItem.id === undefined) {
       objct.$refs.form.reset()
    }
  },
}

基本上我检查了表单数据是否有一个 ID，如果没有，并且状态是在创建，然后调用 the obj.$ref.form.reset() 如果我直接在观察者中这样做，那么它将是 this.$ref.form.reset() obvs .

但是您只能从它所引用的页面调用 $ref。 这就是我想用这个答案来表达的。

Answer 9

这就是我在Vue 3 中的做法。

html:

  <input type="text" v-model="state.name">

js:

import {reactive} from "vue";

const state = reactive({
    name: ""
})

axios.post('/contact', state)
    .then(res => {
        if (res.status == 200) {
            state.name = ""
        }
    })

响应状态 200 是表单输入的成功提交。 state.name 是响应式的，如果提交成功，将设置为 ""。