How to access nested JSON data through props using v-for

[haizad]

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.

[haizad]

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!

[metalsadman]

@haizad v-for="data in props.row.data" … :label="data.name", you can simply display the value of props to see what the structure is and would’ve avoided making guesses like you are doing now. Ie. {{props}}, or see API card scope slot section what objects exposed in the scope.

[haizad]

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