Q-table display data

[metalsadman]

@Kate said in Q-table display data:

data.toObject()

q-table data must be an array.

[Kate]

This post is deleted!

[metalsadman]

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

[Kate]

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

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

[Kate]

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)

[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',
    ...
  },
 ....
]

[Kate]

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)

[metalsadman]

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

[Kate]

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

[metalsadman]

@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");
  }

[Kate]

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