No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    4
    12
    2993
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fatima.yas last edited by Shone

      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"}},
      ]
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        If I understand your problem, you can use an arrow function.

        Like this maybe?

        https://jsfiddle.net/smolinari/ednwy63t/

        Scott

        F 1 Reply Last reply Reply Quote 0
        • F
          fatima.yas @s.molinari last edited by

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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

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

            Scott

            F 1 Reply Last reply Reply Quote 0
            • Shone
              Shone last edited by

              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.

              F 1 Reply Last reply Reply Quote 0
              • Hawkeye64
                Hawkeye64 last edited by

                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>
                
                F 1 Reply Last reply Reply Quote 0
                • F
                  fatima.yas @Hawkeye64 last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • F
                    fatima.yas @Shone last edited by 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?

                    Shone 1 Reply Last reply Reply Quote 0
                    • F
                      fatima.yas @s.molinari last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • Hawkeye64
                        Hawkeye64 last edited by 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
                        }
                        
                        1 Reply Last reply Reply Quote 0
                        • Shone
                          Shone @fatima.yas last edited by

                          @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

                          1 Reply Last reply Reply Quote 0
                          • F
                            fatima.yas last edited by

                            thank you.i solved it

                            1 Reply Last reply Reply Quote 1
                            • First post
                              Last post