[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


  • Admin

    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
    }
    

  • Admin

    @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



  • thank you.i solved it


Locked