CODEWITHSUNDEEP
vue.jsvuetify.js
mbriff
mbriff

Reputation: 83

Vuetify form validation errors after reset

I have the following inside a component:

<v-form v-model="valid" ref="form" class="px-3">
  <v-text-field label="First Name" v-model="firstname" :rules="inputRules"></v-text-field>
  <v-text-field label="Last Name" v-model="lastname" :rules="inputRules"></v-text-field>
  <v-text-field label="Email" v-model="email"></v-text-field>
  <v-btn :loading="loading" flat class="success mx-0 mt-3" @click="submit">Create Person</v-btn>
</v-form>

Script: 

export default {
  data() {
    return {
      valid: true,
      firstname: '',
      lastname: '',
      email: '',
      loading: false,
      dialog: false,
      inputRules: [
        v => v.length >= 2 || 'Minimum length is 2 characters'
      ]
    }
  },
  methods: {
    submit() {
      if(this.$refs.form.validate()) {
        this.loading = true;

        const person = {
          firstname: this.firstname,
          lastname: this.lastname,
          email: this.email
        };

        sendToMyDB(person).then(()=>{
          this.loading = false;
          this.dialog = false;
          this.$refs.form.reset();
        })
      }
    }
  }
}

So Im submitting the form data to my database then in the success promise Im using this.$refs.form.reset(); to reset my form.

However, I am getting an error messages immediately and on each subsequent submit:

"[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of undefined"

and

TypeError: Cannot read property 'length' of undefined

Upvotes: 2

Views: 7941

Answers (1)

lmarqs
lmarqs

Reputation: 1471

Vuetify is passing undefined to the functions referenced in inputRules. You can see it reading the stack call:

call stack

I suggest that you test if v is undefined before accessing its content:

v => (v && v.length >= 2) || 'Minimum length is 2 characters'

or 

v => (!v || v.length >= 2) || 'Minimum length is 2 characters'

depending on your business rules.

var app = new Vue({
  el: '#app',
  data() {
    return {
      valid: true,
      firstname: '',
      lastname: '',
      email: '',
      loading: false,
      dialog: false,
      inputRules: [
        v => (v && v.length >= 2) || 'Minimum length is 2 characters'
      ]
    }
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;

        const person = {
          firstname: this.firstname,
          lastname: this.lastname,
          email: this.email
        };

        /* sendToMyDB(person) */
        Promise.resolve().then(() => {
          this.loading = false;
          this.dialog = false;
          this.$refs.form.reset();
        })
      }
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-form v-model="valid" ref="form" class="px-3">
    <v-text-field label="First Name" v-model="firstname" :rules="inputRules"></v-text-field>
    <v-text-field label="Last Name" v-model="lastname" :rules="inputRules"></v-text-field>
    <v-text-field label="Email" v-model="email"></v-text-field>
    <v-btn :loading="loading" text class="success mx-0 mt-3" @click="submit">Create Person</v-btn>
  </v-form>
</div>

Upvotes: 7

Related Questions