Q-table display data
-
-
@metalsadman Oh my god, i finally got it! Thank you so much!
<q-table title="Users" :columns="columns" row-key="name" :data="users" > ... computed: { users() { return this.$store.state.users; } }, created() { this.$store.dispatch("getUsers"); }
mutations.js
export const GET_USERS_DATA = (state, users) => { state.users = users.usersList; console.log(users, "userLists"); };
actions.js
export const getUsers = (ctx) => { let getRequest = new GetAllRequest(); let stream = client.getAll(getRequest, {}); stream.on("data", data => { ctx.commit("GET_USERS_DATA", data.toObject()); }); stream.on("error", err => {}); stream.on("status", status => {}); stream.on("end", () => {}); };
It is finally showing data (arrays of objects - each user) in Vue dev tools BUT q-table says No data available : (
-
-
This post is deleted! -
@Kate how does your data array look? it should work, as you can see in the examples in the docs.
-
@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:undefinedand users - undefined
-
@Kate i mean this
console.log(users, "userLists");
in your mutation, what does it log? and please expand. -
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) -
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', ... }, .... ]
-
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) -
should work by now, post your state.js. or better make a repo so we could see.
-
@metalsadman
https://github.com/tavitamenashe01/grpc-app
Table in grpc-app/client/src/pages/Logs.vue -
@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"); }
-
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