Только что закончил учебник 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>
32
Tony 7 Янв 2017 в 09:34

5 ответов

Лучший ответ

Вам нужно установить в this.text пустую строку в вашей функции submitForm:

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

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

Помните, что привязка работает в обоих направлениях: представление (входной) может обновлять модель (строковую), или модель может обновлять представление.

28
Rashad Saleh 7 Янв 2017 в 09:07

Предполагая, что у вас огромная форма или вы просто не хотите сбрасывать каждое поле формы одно за другим, вы можете сбросить все поля формы, перебирая поля по одному

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" используется в элементе формы. Это по умолчанию предотвратит отправку формы и вызовет функцию 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 из любого места, и это сбросит поля формы.

17
Raf 19 Ноя 2017 в 21:59

< Сильный > Разметка

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

Прочитайте разницу между глубокой и мелкой копиями ЗДЕСЬ.

3
Syed 28 Июн 2019 в 11:19

Для сброса всех полей в одной форме вы можете использовать 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>
1
Vladimir Salguero 4 Окт 2019 в 15:47

Это решение предназначено только для компонентов .

Если мы переключаем (показываем / скрываем) компоненты, используя логические значения, тогда данные также удаляются. Не нужно чистить поля формы.

Я обычно делаю компоненты и инициализирую их, используя логические значения. например

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

Когда вы нажимаете кнопку редактирования, это логическое значение становится истинным, и после успешной отправки я снова изменяю его на ложное.

0
Afraz Ahmad 3 Окт 2019 в 06:34