[Solved] When some property of array is object how to use v-for

[fatima.yas]

@s-molinari thank you,but i write my code in .vue file and dont use the
new vue ({
el:’ ',
…
})

[s.molinari]

It doesn’t matter if you are using SFCs or the UMD version of Quasar. The arrow functions still work.

Scott

[Shone]

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.

[Hawkeye64]

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>

[fatima.yas]

@hawkeye64 thank you,i changed it,but doesnt work

[fatima.yas]

@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?

[fatima.yas]

@s-molinari i use Quasar cli and i install that by below code:
npm install -g quasar-cli
quasar init project-name

[Hawkeye64]

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
}

[Shone]

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

https://vuejs.org/v2/guide/instance.html

[fatima.yas]

thank you.i solved it