Cannot read property 'validate' of undefined

[haizad]

Hi,

I am trying to follow the quasar documentation on validation parts. https://quasar.dev/vue-components/input#Validation . The validation works as expected *see Picture 1, but when I am trying to submit the form RIGHT AFTER all the input fields got correctly validated, I got error message of Cannot read property ‘validate’ of undefined *see Picture 2.

Picture 1

Picture 2

I assumed that it cannot read ‘validate’ property after all the field was correctly filled.

My form code :

<q-form @submit="onSubmit" class="q-gutter-md">

.....
<q-select
    behavior="menu"
    standout="bg-teal text-white"
    v-model="details"
    :options="detailsdata"
    option-value="id"
    option-label="name"
    option-disable="inactive"
    emit-value
                    
    lazy-rules = "ondemand"
    :rules="[ val => !!val || 'Skop kerja perlu di pilih/isi']"
    map-options
    label="Skop Kerja"
>

..
data() {
    return {
      details: null,

onSubmit function :

    onSubmit() {
          this.$refs.details.validate();

Reference

https://quasar.dev/vue-components/input#Validation

Update : I counter the issue by using if-statement and the error message is gone.

if(this.packages === null || this.contractname === null || this.details === null || this.worktype === null || this.states === null || this.districts === null) 
{

       this.$refs.packages.validate();
       this.$refs.contractname.validate();
       this.$refs.details.validate();
       this.$refs.worktype.validate();
       this.$refs.states.validate();
       this.$refs.districts.validate();
}

[metalsadman]

@haizad in your template snippet there’s no ref used, better make a codepen imo.