Как правильно очистить форму во vue.js?

Пользователь

от enid , в категории: JavaScript , 7 месяцев назад

Как правильно очистить форму во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jakayla , 7 месяцев назад

@enid 

Есть несколько способов очистить форму во Vue.js. Это может быть сделано с использованием методов Vue.js, директивы v-model или путем изменения значений данных.

  1. Использование методов Vue.js:


В вашем экземпляре Vue.js создайте метод, который будет сбрасывать данные формы в исходное состояние:

1
2
3
4
5
6
7
methods: {
  resetForm() {
    this.name = ''; // сброс значения поля 'name'
    this.email = ''; // сброс значения поля 'email'
    // добавьте остальные поля формы для сброса
  }
}


В HTML шаблоне вызовите этот метод по кнопке "Сброс":

1
Сброс


  1. Использование директивы v-model:


Если вы используете директиву v-model для связывания элементов формы с данными в экземпляре Vue.js, вы можете просто сбросить значения данных на пустую строку или другое исходное значение:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
data() {
  return {
    name: '',
    email: '',
    // добавьте остальные поля формы
  }
},
methods: {
  resetForm() {
    this.name = '';
    this.email = '';
    // добавьте остальные поля формы
  }
}


В HTML шаблоне добавьте директиву v-model к полям формы:

1
2
3



И кнопку "Сброс":

1
Сброс


  1. Изменение значений данных:


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
data() {
  return {
    form: {
      name: '',
      email: '',
      // добавьте остальные поля формы
    }
  }
},
methods: {
  resetForm() {
    this.form = {
      name: '',
      email: '',
      // добавьте остальные поля формы
    };
  }
}


В HTML шаблоне используйте новый объект для связывания элементов формы с данными:

1
2
3



И кнопку "Сброс":

1
Сброс


Это несомненно не единственные способы очистить форму во Vue.js, но они являются наиболее распространенными и применимыми.