Timing of validations with vuetify rules

Question

we have a form that includes a radio button with "yes/no" answers which includes a text field that is required if the user chooses "yes". The text box is hidden with "v-if" if "no" is chosen. The text box also includes a vuetify "rule" which should only trigger if the "yes" option is chosen. We also have an icon at the top of the page that shows wether the form is valid or not. This is set based on the "@change" event on the form fields.

This sort of works, except it seems like there is a timing/ordering issue with events that causes the validation to work incorrectly when the radio buttons are toggled (valid when it should be invalid and vice-versa). If I change some other field on the form, then it works ok (the correct "valid" icon shows up). This is the relevant parts cut out of the vue file:

   <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)
  }

ax123man ax123man · Accepted Answer · 2018-07-17T13:11:40

I was able to fix this by moving the icon update to a computed value called during the "updated" cycle:

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

Timing of validations with vuetify rules

1 Answers