Vue v-text-field 规则未正确应用

Question

我有多个带有相应验证的 v-text-field 。单击提交按钮时，规则应用正常，但是当鼠标左键触发验证器时，不应用应用于 v-text-field 的规则，而是为相同类型的第一个控件定义的规则，即，首先将 v-text-field 应用于此控件。公司名称文本框显示标题是必需的。由于某种原因，表单向导采用了第一个控制规则，而不是自己定义的规则。

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">&times;</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>`,

Answer 1

将 v-if 更改为 v-show 解决了问题