以vuejs形式清除输入

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; 

有关更多类型信息,请参阅此处

基本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"表单元素中使用的ow .默认情况下,这将阻止表单提交并调用该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') 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>

请在此处阅读深复制和浅复制之间的区别。

Answer 5

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