Я создал шаг на каждой вкладке, который представляет шаги в форме. Я использовал условие v-if, чтобы проверить, какой шаг должен отображаться. На данный момент шаги работают отлично, когда я нажимаю кнопку «Далее». Даже если входы пусты, я могу перейти к следующему шагу. Мне нужна некоторая проверка на каждом шаге, которая проверяет, является ли ввод пустым, и добавляет класс к этому вводу, скажем, «класс ошибки». Как мне это сделать в vuejs? Это моя форма в файле .vue.
<form id = "product_form" enctype = "multipart/form-data">
<!-- One "tab" for each step in the form: -->
<button type = "button" v-if = "step === 2 || step === 3 || step === 4" id = "prevBtn1" @click.prevent = "prev()"></button>
<div v-if = "step === 1" class = "tab">
<h3>Post a product</h3>
<div class = "preview" id = "preview">
</div>
<div class = "single-holder">
<input type = "text" name = "pname" id = "pname" placeholder = "Title*" required = "true" ref = "pname">
</div>
</div>
<div v-if = "step === 2" class = "tab">
<h3>Describe your Product</h3>
<div class = "descrip">
<textarea name = "description" id = "description" placeholder = "Description" required = "true"></textarea>
</div>
</div>
<div v-if = "step === 3" class = "tab">
<h3>Set Inventory</h3>
<div class = "fixed-width">
<div class = "single-holder">
<label>Quantity</label>
<input type = "number" name = "quantity" id = "quantity" required = "true">
</div>
</div>
</div>
<div v-if = "step === 4" class = "tab">
<h3>Share On</h3>
<div class = "address-details-holder clearfix">
<div class = "single-holder">
<input placeholder = "_ _ _ _" id = "zipcode" name = "zipcode" maxlength = "4" type = "text" @keypress = "onlyNumber">
</div>
</div>
</div>
</form>
Это мой метод в Vuejs
methods:{
onlyNumber ($event) {
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
$event.preventDefault();
}
},
prev() {
this.step--;
},
next() {
this.step++;
//if (this.step===1){
// console.info(this.$refs.name.value);
//if (this.$refs.pname.value !== null){
// this.step++;
//}
//}
}
На данный момент шаги работают нормально, если я удалю условие if в функции next () в методах. Но мне нужны проверки ввода на каждом шаге, поэтому пользователь должен заполнить недостающие данные во всех полях формы.
Думаю, можно использовать Vee Validate. Это поможет вам проверить, требуется ли каждый вход
<input v-validate = "'required'" data-vv-as = "field" name = "required_field" type = "text">
И вернуть сообщение об ошибке для этого ввода, если оно ложно
<span>{{ errors.first('email') }}</span>
он срабатывает только при отправке, но вы можете установить переменную в данных для проверки на каждом шаге
удалось решить эту проблему с помощью этого ------------------------------------------- ----------------- -------------------- --------- ----- if (this.step === 1) {if (this. $ refs.pname.value! == '') {this.step ++; }}
Будет ли это работать на каждом шаге или срабатывает только при отправке?