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

910

31 мая 2017, 05:24

Подобный вопрос уже был, про сброс формы через метод 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):

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

Answer 1

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

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>

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

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает значение времени в hide(), show()

При использовании метода hide() или show(), страница не обращает внимание на скорость выставленную в круглых скобках, и в результате сразу скрывает...

339

jQuery