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

    Q-table display data

    Help
    2
    19
    2172
    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.
    • metalsadman
      metalsadman @Kate last edited by

      @Kate how does your data array look? it should work, as you can see in the examples in the docs.

      1 Reply Last reply Reply Quote 0
      • K
        Kate last edited by

        @metalsadman Vue dev tools shows me this:

        payload:Array[1]
        0:Array[4]
        0:Array[5]
        1:Array[5]
        2:Array[5]
        3:Array[5]
        type:“GET_USERS_DATA”
        state
        auth:Object
        status:true
        user:Object
        users:undefined

        and users - undefined

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @Kate last edited by

          @Kate i mean this console.log(users, "userLists"); in your mutation, what does it log? and please expand.

          1 Reply Last reply Reply Quote 0
          • K
            Kate last edited by

            Here is my console.log(users, “userLists”)

            [Array(4)]
            0: Array(4)
            0: (5) [“1”, “admin@admin.com”, “Admin”, “Greatest”, 1]
            1: (5) [“2”, “katyperry@gmail.com”, “Katy”, “Perry”, 1]
            2: (5) [“3”, “hello@hello.com”, “Hello”, “Hel”, 1]
            3: (5) [“4”, “john@hello.com”, “John”, “Brown”, 1]
            length: 4
            proto: Array(0)
            length: 1
            proto: Array(0)

            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by metalsadman

              then that’s wrong, your data, must conform to what your columns setup is. it should be an array of objects. the log showing is just an array of arrays.

              should look something like this based on your columns definition above:

              [
                {
                  email: 'admin@admin.com',
                  ....
                },
                {
                  email: 'katyperry@gmail.com',
                  ...
                },
               ....
              ]
              
              1 Reply Last reply Reply Quote 0
              • K
                Kate last edited by

                Hey, here is console.log
                Array of objects.
                But still no data in q-table 😞
                I can’t understand where is my mistake…

                (5) [{…}, {…}, {…}, {…}, {…}]
                0: {id: “1”, email: “admin@admin.com”, firstName: “Admin”, lastName: “Greatest”, role: 1, …}
                1: {id: “2”, email: “katyperry@gmail.com”, firstName: “Katy”, lastName: “Peach”, role: 1, …}
                2: {id: “3”, email: “hello@hello.com”, firstName: “Hello”, lastName: “Hel”, role: 1, …}
                3: {id: “4”, email: “john@hello.com”, firstName: “John”, lastName: “Brown”, role: 1, …}
                4: {id: “5”, email: “kp@gmail.com”, firstName: "Katy ", lastName: “Perry”, role: 1, …}
                length: 5
                proto: Array(0)

                1 Reply Last reply Reply Quote 0
                • metalsadman
                  metalsadman last edited by

                  should work by now, post your state.js. or better make a repo so we could see.

                  1 Reply Last reply Reply Quote 0
                  • K
                    Kate last edited by Kate

                    @metalsadman
                    https://github.com/tavitamenashe01/grpc-app
                    Table in grpc-app/client/src/pages/Logs.vue

                    metalsadman 1 Reply Last reply Reply Quote 0
                    • metalsadman
                      metalsadman @Kate last edited by

                      @Kate try these changes.

                      //auth-module/index.js
                      // you don't have a state initiated
                      // be sure to add them here for reactivity
                      const state = {
                        users: [],
                        // add other states
                      }
                      export default {
                        namespaced: true, // better to namespace your module to avoid confusion refer to vuex docs
                        mutations,
                        actions,
                        state
                      }
                      
                      // Logs.vue
                      computed: {
                          users() {
                            return this.$store.state.auth.users;
                          }
                        },
                        created() {
                          this.$store.dispatch("auth/getUsers");
                        }
                      
                      1 Reply Last reply Reply Quote 0
                      • K
                        Kate last edited by

                        Wooooow! it is working now !!!
                        I understand everything )))
                        @metalsadman thank you so much!
                        Thanks to people like you, other people don’t despair!
                        Finally happy 😃

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