Q-table display data



  • 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!



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



  • @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?



  • @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", () => {});
    };
    


  • Thank you so much for the tips!



  • @Kate said in Q-table display data:

    Thank you so much for the tips!

    welcome, see update above…



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



  • @Kate said in Q-table display data:

    data.toObject()

    q-table data must be an array.



  • 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:undefined

    and 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 😃


Log in to reply