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