[Solved] When some property of array is object how to use v-for
-
hi, i have a problem,i have a varieties array with property that one of them is object. I cant get value of size …
Also tableDataVariety is result of api request that i want to show in table.thanks for help<q-table class="responsive bg-white" :data="tableDataVariety" :columns="Varietycolumns" row-key="ID" separator="cell" > <tr slot="header" slot-scope="props" > <q-th key="price" :props="props"> <span class="text-grey-9"><strong>price</strong></span> </q-th> <q-th key="size" :props="props" > <span class="text-grey-9"><strong>size</strong></span> </q-th> <q-th key="height" :props="props" > <span class="text-grey-9"><strong>height</strong></span> </q-th> </tr> <template slot="body" slot-scope="props"> <q-tr :props="props"> <q-td key="price" :props="props">{{ props.row.price }}</q-td> <q-td key="size"> {{props.row.size.value}} </q-td> <q-td key="height" :props="props">{{ props.row.height }}</q-td> <q-td key="length" :props="props">{{ props.row.length }}</q-td> </q-tr> </template> </q-table>``` ```javascript Varietycolumns: [ { name: 'price', label: 'price', field: 'price', sortable: true,align:'center' }, { name: 'size', label: 'size', field: 'size' }, { name: 'height', label: 'height', field: 'height',align: 'center',} ] tableDataVariety: [{ID: 440, price: "0", quantity: "0", minQuantity: "0", length: "0.00",size: {ID: 3, value: "9 meter"}}, ]
-
If I understand your problem, you can use an arrow function.
Like this maybe?
https://jsfiddle.net/smolinari/ednwy63t/
Scott
-
@s-molinari thank you,but i write my code in .vue file and dont use the
new vue ({
el:’ ',
…
}) -
It doesn’t matter if you are using SFCs or the UMD version of Quasar. The arrow functions still work.
Scott
-
Hi @fatima-yas I think that you should look at some VueJS tutorials, or read the docs to get the better understanding of how VueJS works, since Quasar is a VueJS framework.
-
You’re missing
:props="props"
on your size column:<q-td key="price" :props="props">{{ props.row.price }}</q-td> <q-td key="size"> {{props.row.size.value}} </q-td>
Should be:
<q-td key="price" :props="props">{{ props.row.price }}</q-td> <q-td key="size" :props="props"> {{props.row.size.value}} </q-td>
-
@hawkeye64 thank you,i changed it,but doesnt work
-
@shone hi,i read a lot of vue js document and tutorials.i write my code in pages folder in project.that generated when run npm install -g quasar-cli …
you think, it is wrong???
Although all of my code worked correctly even some time i use the api request in my code .and i get the result
what i do? -
@s-molinari i use Quasar cli and i install that by below code:
npm install -g quasar-cli
quasar init project-name -
For the above, you can always write a function where you pass
props.row
and it returns the proper data. Then you can debug it to make sure everything is as expected:<q-td key="size" :props="props"> {{ getSizeValue(props.row) }} </q-td>
Then in methods:
getSizeValue: function (row) { console.log(row.size) // <- inspect your data to verify it is what you expect return row.size.value }
-
@fatima-yas Your comment above indicates that you didn’t fully understand how VueJS works. Using SFC or UMD logic stays the same.
Read this to get better understanding. -
thank you.i solved it