I am currently facing an issue while using Quasar to create Q-Tables. I am struggling with incorporating nested objects with dynamic key names. Below is the content of my table:
data: [
{
'FrozenYogurt' : {
'topping': 'strawberry'
}
},
{
'IceCreamSandwich' : {
'baseFlavor': 'chocolate'
}
},
{
'CreamPuff' : {
'sourceBakery': 'Starbucks'
}
]
Here are my columns:
columns: [
{
name: 'key',
required: true,
label: 'Property',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'key.key', align: 'center', label: 'Property', field: 'key', sortable: true },
{ name: 'key.value', label: 'Value', field: 'key.value', sortable: true, style: 'width: 10px' },
],
In this scenario, my desired table structure should be as follows:
Product Property Value
FrozenYogurt topping strawberry
IceCreamSandwich baseFlavor chocolate
CreamPuff sourceBakery Starbucks
Attached is my vue file for reference:
<q-table
:data="data"
:columns="columns"
row-key="key"
binary-state-sort
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="key" :props="props">
{{ props.key }}
<q-popup-edit v-model="props.key">
<q-input v-model="props.row.key" dense autofocus counter></q-input>
</q-popup-edit>
</q-td>
<q-td key="key.key" :props="props">
{{ props.key.key }}
<q-popup-edit v-model="props.key.key" title="Update Property" buttons>
<q-input v-model="props.key.key" dense autofocus></q-input>
</q-popup-edit>
</q-td>
<q-td key="key.value" :props="props">
<div class="text-pre-wrap">{{ props.key.value }}</div>
<q-popup-edit v-model="props.key.value">
<q-input type="textarea" v-model="props.key.value" dense autofocus></q-input>
</q-popup-edit>
</q-td>
</q-tr>
</template>
</q-table>
While my vue file may appear incorrect at first glance, I am unsure of how to access the object key names and values properly.
Is there a solution to this issue?
Thank you!