Question

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

尝试两者后：

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

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

在有时间推送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

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

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对象的所有字段重置为空字符串。假设您有选择地想要设置为特定值的一个或两个字段，在上面的块中，您可以根据字段名称轻松设置条件

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

标记

<template lang="pug">
  form
    input.input(type='text', v-model='formData.firstName')
    input.input(type='text', v-model='formData.lastName')
    button(@click='resetForm', value='Reset Form') 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 5

此解决方案仅适用于组件

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

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

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

使用时单击编辑按钮，则此布尔值变为true，成功提交后，我再次将其更改为false。

Answer 6

要以一种格式重置所有字段，可以使用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 7

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

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

我在自定义组件文件的监视程序中调用了此方法，而不是使用自定义组件的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()（如果我直接在观察程序中执行此操作，那么它将是{{ 1}}。

但是您只能从被引用的页面调用$ ref。我想用这个答案来指出。

Answer 8

我用这个

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

这对我来说很好。

以vuejs形式清除输入

8 个答案: