Question

我们有一个表单，其中包含带有“是/否”答案的单选按钮，其中包括用户选择“是”时需要的文本字段。如果选择“否”，则文本框将以“ v-if”隐藏。文本框还包含一个可视化“规则”，该规则仅在选择“是”选项时才触发。我们在页面顶部还有一个图标，用于显示表单是否有效。这是基于表单字段上的“ @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)
},

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

1 个答案: