[Vuejs]-How to access data that has already been validated?

by

0👍

You could listen the updated:error event and when the value received is false go your call.

<template>
 <v-text-field
  :rules="[rules.required]"
  @update:error='doSomething'
 ></v-text-field>

And in the script

methods: {
 doSomething (error) {
   if (error === false) {
     // model is validated
   }
 }
}

To access the fields value you should use v-model.

0👍

As you can see in my Codepen, the submit button does not work until the firstname field is valid. You can also remove lazy-validation so the button will not be clickable until it has met the validation rules.

<v-form
  ref="form"
  v-model="valid"
  lazy-validation
>
  <v-text-field
    v-model="firstname"
    :rules="nameRules"
    label="Firstname"
    required
  ></v-text-field>

  <v-btn
    :disabled="!valid"
    color="success"
    @click="doSomething"
  >
    Submit
  </v-btn>
</v-form>

And here is the script part:

<script>
  export default {
     data () {
       return {
         valid: true,
         firstname: '',
         nameRules: [v => !!v || 'Name is required']
     }
    },
    methods: {
       doSomething () {
          if (this.$refs.form.validate()) {
                 console.log(this.firstname);

          }


       },

    }
 }
</script>

Leave a comment