bootstrap-vue table doesn't get populated with my database data

Question

I would like to populate my bootstrap-vue table with data from my database. I am using vuex to attempt to achieve this; however, the bootstrap-vue table isn't getting the data for some reason. I checked Vuex dev tools:

I added console.log('Getters: ' + this.$store.getters.allEmployees); to my component to see what that retrieves and it only outputs Getters: to the console.

To further troubleshoot this, I hardcoded: [{"id":1,"name":"Jane Smith","email":"jane@smith.com","job_title":"Lead"},{"id":2,"name":"John Smith","email":"john@smith.com","job_title":"Installer"}] into the employees state and now the data gets loaded into the table.

Vuex module employees.js

const state = {
    employees: [],
    employeesStatus: null,
};

const getters = {
    allEmployees: state => {
       return state.employees;
    },
};

const actions = {
    fetchAllEmployees({commit, state}) {
        commit('SET_EMPLOYEES_STATUS', 'loading');

        axios.get('/api/employees')
            .then(res => {
                commit('SET_EMPLOYEES', res.data);
                //console.log(state.employees);
                commit('SET_EMPLOYEES_STATUS', 'success');
            })
            .catch(error => {
                commit('SET_EMPLOYEES_STATUS', 'error');
            });
    },
};

const mutations = {
    SET_EMPLOYEES(state, employees) {
        state.employees = employees;
    },
    SET_EMPLOYEES_STATUS(state, status) {
        state.employeesStatus = status;
    } 
};

export default {
    state, getters, actions, mutations,
};

VueJS component EmployeeDataTable.vue:

<template>
    <div class="overflow-auto pb-3" style="background: white; ">
        <b-card
        header="Employees"
        header-tag="header"
        >
            <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="my-table"
            ></b-pagination>

            <p class="mt-3">Current Page: {{ currentPage }}</p>

            <b-table
            id="employee-table"
            ref="employee-table"
            :items="items"
            :per-page="perPage"
            :current-page="currentPage"
            small
            ></b-table>
        </b-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

  export default {
    name: "EmployeeDataTable",

    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [],
      }
    },
    computed: {
      ...mapGetters(['allEmployees']),

      rows() {
        return this.items.length
      }
    },
    methods: {
        getEmployees() {
          this.$store.dispatch('fetchAllEmployees').then(() => {
            this.items = this.$store.getters.allEmployees;
            console.log('Getters: ' + this.$store.getters.allEmployees); //<-Returns Getters:
          });
          //this.items = this.$store.getters.allEmployees;
        }
    },
    mounted() {
        this.getEmployees();
    }
  }
</script>

Your `fetchAllEmployees` action isn't [composable](https://vuex.vuejs.org/guide/actions.html#composing-actions). Have it `return` the Axios promise, ie `return axios.get(...` — Phil, Mar 24 '20 at 00:48
Also, forget using `items` since you've already mapped your `allEmployees` getter to an `allEmployees` computed property. Just use `:items="allEmployees"` — Phil, Mar 24 '20 at 00:51
@Phil I will need some time to look through the links you gave me and will respond back, hopefully with some working code :-D — dottedquad, Mar 24 '20 at 00:55
Got this to work. I get this now. I still have a ton to learn about vuejs and vuex. — dottedquad, Mar 24 '20 at 01:01

score 2 · Accepted Answer · answered Mar 24 '20 at 01:08

Phil's explanation did the trick. The snippets I changed are:

const actions = {
    fetchAllEmployees({commit, state}) {
        commit('SET_EMPLOYEES_STATUS', 'loading');

       return axios.get('/api/employees')
            .then(res => {
                commit('SET_EMPLOYEES', res.data);
                //console.log(state.employees);
                commit('SET_EMPLOYEES_STATUS', 'success');
            })
            .catch(error => {
                commit('SET_EMPLOYEES_STATUS', 'error');
            });
    },
};

and

    <b-table
    id="employee-table"
    ref="employee-table"
    :items="allEmployees"
    :per-page="perPage"
    :current-page="currentPage"
    small
    ></b-table>

bootstrap-vue table doesn't get populated with my database data

1 Answers1