使用 vuetify 规则进行验证的时间

Posted 2023-02-23

【中文标题】使用 vuetify 规则进行验证的时间

【英文标题】：Timing of validations with vuetify rules

【发布时间】：2018-12-24 10:02:27

【问题描述】：

我们有一个表单，其中包含一个带有“是/否”答案的单选按钮，其中包含一个文本字段，如果用户选择“是”，则该文本字段是必需的。如果选择“否”，则文本框用“v-if”隐藏。文本框还包括一个 vuetify“规则”，只有在选择“是”选项时才会触发。我们还在页面顶部有一个图标，显示表单是否有效。这是基于表单字段上的“@change”事件设置的。

这种方法有效，但似乎存在时间/排序问题，导致在切换单选按钮时验证无法正常工作（当它应该无效时有效，反之亦然）。如果我更改表单上的其他一些字段，那么它可以正常工作（显示正确的“有效”图标）。这是从vue文件中剪下来的相关部分：

   <v-form ref="dealerAppform">


<v-layout row wrap>
  <v-flex xs12 sm6>
    <p>Do you have a web site?</p>
  </v-flex>
  <v-flex xs6 sm3>
    <v-radio-group v-model="dealerApplication.website" row @change="toggleSaveData('website')">
      <v-radio :label="yes" :value="'true'"></v-radio>
      <v-radio :label="no" :value="'false'"></v-radio>
    </v-radio-group>
  </v-flex>
  <transition name="slide-fade">
    <v-flex xs24 sm12 v-if="dealerApplication.website == 'true'">
      <v-text-field v-model="dealerApplication.websiteUrl" :rules="websiteUrlRules" maxlength="40" :counter="40"
                    :label="$t('message.dealerWebsite')" @change="toggleSaveData('websiteUrl')" validate-on-blur
                    required></v-text-field>
    </v-flex>
  </transition>
</v-layout>



methods: 
  toggleSaveData(fieldName) 
    //show the correct icon:
    this.$emit('dealer-info-complete', this.$refs.dealerAppform.value)
  

【参考方案1】：

我能够通过将图标更新移动到在“更新”周期中调用的计算值来解决此问题：

updated: function() 
  this.$emit('dealer-info-complete', this.$refs.dealerAppform.value)
,