Q-table display data

Kate

Hey Quasar gurus,

There is q-table where i need to display all data = all users from vuex, actions.js :

export const getUsers = () => {
  let getRequest = new GetAllRequest();
  let stream = client.getAll(getRequest, {});
  stream.on("data", data => {
    console.log(data.toObject());
  });
  stream.on("error", err => {});
  stream.on("status", status => {});
  stream.on("end", () => {});
};

Here is my Logs.vue:

<q-table
      title="Users"
      :columns="columns"
      row-key="name"
      :data="getUsersTable"
      :pagination.sync="pagination"
      :loading="loading"
      :filter="filter"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="id" :props="props">{{ props.row.id }}</q-td>
          <q-td key="firstName" :props="props">{{ props.row.firstName }}</q-td>
        </q-tr>
      </template>
    </q-table>
...
<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      filter: "",
      loading: false,
      pagination: {
        sortBy: "desc",
        descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 10
      },
      columns: [
        {
          name: "id",
          required: true,
          label: "id",
          align: "left",
          field: row => row.name,
          sortable: true
        },
        {
          name: "fistName",
          required: true,
          label: "first name",
          align: "left",
          field: row => row.firstName,
          sortable: false
        },
        {
          name: "lastName",
          required: true,
          label: "last name",
          align: "left",
          field: row => row.lastName,
          sortable: true
        },
        {
          name: "email",
          required: true,
          label: "email",
          align: "left",
          field: row => row.email,
          sortable: true
        }
      ]
    };
  },
  computed: {
    ...mapActions({ getUsersObject: "getUsers" }),
    getUsersTable() {
      return Object.values(this.getUsersObject);
    }
  }
};
</script>

But it displays only in console.log.
I will be so gratefull for all responses and +100500 for your karma!

metalsadman

I suggest you take time to read vuex docs. Your getUsers action doesnt return anything, mapAction should be in the methods not at computed.

Kate

@metalsadman 1) Thanks for noticing my mistake with mapAction. Already fixed it.
2) But in Vue dev tools i see a registered user.
And trying to dislpay this data, and am I really thinking wrong?

metalsadman

@Kate you can use mapState or a getter at computed (though I suggest you use the more verbose one ie. this.$store.state.someState, since afaik, mapXxx helpers are going to be deprecated soon), if you don’t plan to return anything in your action. in your action tho (your snippet above), you should call a mutation to your state so the update will reflect in your component, currently your action does nothing to the state, you just console logged it. so my suggestion still stand, you need to understand how vuex work first. if the docs is not that clear to you then google for supplementary articles or tutorials about it, imho.

given what you shown, I would do something like this:

// component
<q-table :data="data" ... />
...
  computed: {
    data () {
       return this.$store.state.users
    }
  },
  created () {
    // call your action
    this.$store.dispatch('getUsers')
  }
};

// actions.js
export const getUsers = ({commit}) => {
  let getRequest = new GetAllRequest();
  let stream = client.getAll(getRequest, {});
  stream.on("data", data => {
    console.log(data.toObject());
    // assuming you have users in your state object
    // and a mutation named SET_USERS
    // data must be an array of users
    commit('SET_USERS', data)
  });
  stream.on("error", err => {});
  stream.on("status", status => {});
  stream.on("end", () => {});
};

Kate

Thank you so much for the tips!

metalsadman

@Kate said in Q-table display data:

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