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

Hi, any updates on this? I am looking for the same answer too. Thanks!

…
Edit:
Nevermind, I will just using file-picker component

Many thanks! I will learn more on the API section.

Update, I already tried below :

<template v-slot:body-cell-data=“props”>
<q-td :props=“props”>
<q-chip v-for=“value in props” color=“purple” text-color=“white”>
{{value.data}}
</q-chip>
</q-td>
</template>

OR

<template v-slot:body-cell-data=“props”>
<q-td :props=“props”>
<div v-for=“data in props.value”>
{{data[‘name’]}}
</div>
</q-td>
</template>

OR

<template v-slot:body-cell-data=“props”>
<q-td :props=“props”>
<div v-for=“data in props.value”>
{{data.name}}
</div>
</q-td>
</template>

Any helps are greatly appreciated. Thanks!

Hi, this is my first post, and I am still learning Quasar.

I am trying to loop nested array value inside q-td using v-for.

What I am trying to achieve :

What I got

<q-table class="no-shadow"
   :data="data"
   :columns="columns"
   row-key="programtypesname"
   :filter="filter"
   :pagination.sync="pagination"
>

<template v-slot:body-cell-data="props">
       <q-td :props="props">
          <div v-for="program in props.value">
              <q-badge color="purple" :label="program.name" />
         </div>
      </q-td>
</template>

</q-table>

        data() {
            return {
                columns: [
                    {name: 'programtypesname', align: 'left', label: 'Nama Pakej', field: 'programtypesname', sortable: true},
                    {
                      name: 'data', 
                      align: 'left', 
                      label: 'Jenis Skop Kerja', 
                      field: row => row.data,
                      format: val => `${val}`,
                      sortable: true
                    }
                ],
                data: []

data value

[
    {
        "programtypesname": "PRE 1.0",
        "data": [
            {
                "id": 1,
                "name": "B1",
            },
            {
                "id": 2,
                "name": "B2",
            },
            {
                "id": 3,
                "name": "B3",
            }
        ]
    },
    {
        "programtypesname": "PRE 2.0",
        "data": [
            {
                "id": 4,
                "name": "B1",
            }
        ]
    },
    {
        "programtypesname": "PRE 3.0",
        "data": []
    }
]

p/s- Please excuse me if you don’t clear on the question, as I can’t find a right words to express my issue.

Edit. I also tried using data binding syntax, but it doesn’t work either. :

<template v-slot:body-cell-data="props">
    <q-td :props="props">
           <div v-for="program in props.value">
               <q-badge color="purple">{{ program.name }}</q-badge>
          </div>
    </q-td>
</template>

Any helps are greatly appreciated.