0

Подобный вопрос уже был, про сброс формы через метод reset() я знаю. В примерах по работе с Vue.js пишут, что значения полей формы сбрасываются выставлением в модель пустого значения, пример:

const app = new Vue({
  el: '#form',
  data: {
    email: '',
    name: '',
    
    submitted: {
      name: '',
      email: ''
    }
  },
  
  methods: {
    formSubmit: function(event) {
      this.submitted.name = this.name;
      this.submitted.email = this.email;
      
      this.name = this.email = '';
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<form id="form" @submit.prevent="formSubmit">
  <div class="form__line"><input v-model="name" name="name" type="text" /></div>
  <div class="form__line"><input v-model="email" name="email" type="email" /></div>
  <div class="form__line"><button>Submit</button></div>
  
  <output style="display: block; margin-top: 1em">
    <div>{{ submitted.name }}</div>
    <div>{{ submitted.email }}</div>
  </output>
</form>

Однако, если выбирать значение из автокомплита, отправлять форму, а потом просто чистить модель, то форма после этих действий будет выглядеть вот так (Chrome):

введите сюда описание изображения

Как очистить форму без таких побочных эффектов?

2
  • Побочный эффект - это цвет бэкграунда? Его стилями хрома можно поправить. Или попробовать сделать reset() в дополнении к очистке модели. 30 мая 2017 в 14:38
  • Покажите как правильно применить reset(), я запихивал его в метод, обращаясь к event.target, но там потом связь с моделью терялась. Переопределять стили это не ок ) 30 мая 2017 в 19:24

1 ответ 1

2

Убрать фон вот так:

methods: {
    formSubmit: function(event) {
      this.submitted.name = this.name;
      this.submitted.email = this.email;

      this.name = this.email = '';
      event.target.reset();
    }
  }

Но в вашем примере есть какая-то проблема с output тэгом, если убрать внутри <div>, то все заработает:

<output style="display: block; margin-top: 1em">
  {{ submitted.name }}
  {{ submitted.email }}
</output>

Почему это влияет, затрудняюсь ответить..

4
  • Смахивает на необходимость отправлять баг-репорт :-) В моем прошлом вопросе вы ответили, что взаимодействовать с DOM во ViewModel напрямую неправильно, так вот — через event.target мы разве не делаем такое неправильное взаимодействие? 31 мая 2017 в 12:55
  • Трудно сказать чья это проблема) вроде и не браузера, т.к. он имеет право создавать свои стили для автокомплита, но и не vue тоже, т.к. он свою задачу выполнят - поля очищает, а отвечать за то, что браузер применяет доп. стили тоже не его забота. 31 мая 2017 в 13:09
  • Если интересно, то я смог локализовать этот баг — все дело в теге <output>, по всей видимости, во время сброса формы Vue сбрасывает его содержимое полностью, теги удаляются, а значит и некуда выводить модель. Если аутпут заменить на див, например, будет норм работать с вложенными тегами. 2 июн 2017 в 8:34
  • Ага, видел эту особенность, когда делал эксперимент. Я почитал спецификацию этого тэга на w3c, он ведь служит только для вывода расчетов скрипта и у ему при ресете формы тоже выставляется дефолтное значение и похоже, что это выставление убивает все тэги внутри него. Но как до конца это работает так и не понял. Почему, например, дивы убиваются не сразу после сабмита (если reset добавить), а только после второго сабмита. 2 июн 2017 в 8:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.