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

Question

我们有一个表单，它包含一个带有"是/否"答案的单选按钮，其中包括一个文本字段，如果用户选择"是"，则该字段是必需的。如果选择"否"，文本框将用"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)
}

Answer 1

我能够通过将图标更新移动到"更新"周期中调用的计算值来修复此问题：

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