vuejs形式の入力をクリアする

Question

todolistチュートリアルを完了しました。 フォームを送信するときに入力フィールドがクリアされません。両方を試した後

：

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

入力フィールドが適切にクリアされますが、それはまた、TODOを削除します。

todos.text配列の新しいtodoをプッシュする時間がある前に、入力フィールドを削除したようです。

一部の人が大好きです！ありがとう!!

<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

あなたが巨大であるか、単にあなたが一つずつ

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] = ''; 

それとも、リセットする場合に条件を置くことができ、上記ブロック内のそのような場合には特定の値に設定する1つのまたは2つのフィールドがあるとしましょうより多くの種類の情報について

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テンプレートとスクリップを見ますtサンプルは以下のようになります

<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関数を呼び出します。

のは、我々はあなたがどこからでもresetFormを呼び出すことができますし、それはあなたのフォームフィールドをリセットします上記

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

ために、次のしていると仮定しましょう。