Подобный вопрос уже был, про сброс формы через метод 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):
Как очистить форму без таких побочных эффектов?
Убрать фон вот так:
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>
Почему это влияет, затрудняюсь ответить..
Какие существуют виды рекламных бордов и как выбрать подходящий?
Аренда удаленного сервера: цены, провайдеры и условия. Руководство для начинающих
При использовании метода hide() или show(), страница не обращает внимание на скорость выставленную в круглых скобках, и в результате сразу скрывает...
Ситуация такая, добавляю записи в БД с перезагрузкой, решил реализовать на AJAX, но тут ситуация такая что тут мне нужно передать массив