Q-table display data

metalsadman

Thank you so much for the tips!

welcome, see update above…

Kate

@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 : (

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

No More Posting New Topics!

Q-table display data