У меня есть несколько v-text-field с соответствующими проверками. При нажатии кнопки отправки правила применяются нормально, но когда валидаторы запускаются левой кнопкой мыши, правило, которое применяется к v-текстовому полю, не применяется, вместо этого правило, определенное для первого элемента управления того же типа, т.е. , к этому элементу применяется первое v-текстовое поле. В текстовом поле "Название компании" отображается название. По какой-то причине мастер форм принимает первые правила управления вместо правил, определенных для себя.
var signUpModal = new Vue({
el: "#registerModal",
data: () =>({
companyName: "",
companyNameRules: [
(v) => !!v || "Company Name is required"
],
advisorTitle: "",
advisorTitleRules: [
(v) => !!v || "Title is required"
],
type:2
}),
template:
`<div>
<template class="container-fluid" style="padding-top:74px;" id="IDWarningMessage">
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" style="overflow-y: hidden">
<div class="modal-header">
<h5 class="modal-title" id="registerModalID">Register</h5> <button type="button"
class="close" data-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span> </button>
</div>
<div class="modal-body" style="background-color:#F5F5F5;overflow-y:scroll;height:50rem">
<form-wizard @on-complete="onComplete"
@on-loading="setLoading"
@on-validate="handleValidation"
@on-error="handleErrorMessage"
color="#266FAF"
error-color="#e74c3c"
@on-change="handleTabChange">
<template slot="step" scope="props">
<wizard-step :tab="props.tab"
:transition="props.transition"
:key="props.tab.title"
:index="props.index">
</wizard-step>
</template>
<tab-content title="Register" :before-change="validateRegisterAsync">
<v-form ref="advisorForm" v-model="validAdvisor" v-if="type == 1 ">
<v-container>
<v-layout row>
<v-flex>
<v-text-field name="advisor" v-model="advisorTitle" :rules="advisorTitleRules" label="Advisor Title" required :error-messages="errorMessages"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
<v-form ref="companyForm" v-model="company" v-if="type == 2">
<v-container>
<v-layout row>
<v-flex>
<v-text-field v-model="companyName" :rules="companyNameRules" label="Company Name" :error-messages="errorMessages" required></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</tab-content>
</form-wizard>
</div>
</div>
</div>
</div>
</template>
</div>`,