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



  • 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 :

    71c0b6da-c254-41db-871a-97f5498b2a76-image.png

    What I got
    08147a16-517d-4b35-928d-48aa5908dc18-image.png

    <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.



  • 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!



  • @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.



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


Log in to reply