I've encountered an issue with my VueJs app after purchasing the Vuexy template from ThemeForest. I created a new component called CountryTable.vue, and while it works initially, it fails to display data when I refresh the page. It only shows data when I login or navigate to another page. Here is the structure of my CountryTable component:
<template>
<div class="vx-col w-full">
<vx-card title="Countries">
<div slot="no-body" class="mt-4">
<vs-table class="table-dark-inverted" :data="activeCountries">
<template slot="thead">
<vs-th sort-key="name" colspan="2">Country</vs-th>
<vs-th sort-key="sales">Sales</vs-th>
<vs-th sort-key="products">Products</vs-th>
<vs-th sort-key="accessories">Accessories</vs-th>
<vs-th sort-key="basket">Basket</vs-th>
<vs-th sort-key="deliveries">Deliveries</vs-th>
<vs-th sort-key="amount">Amount</vs-th>
</template>
<template slot-scope="{data}" class="text-center">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="{animation: 'flipInX ' + (indextr * 0.2) + 's'}">
<vs-td :data="data[indextr].name">
<img width="30" :src="data[indextr].flag" :alt="data[indextr].name">
</vs-td>
<vs-td :data="data[indextr].name">
{{ data[indextr].name }}
</vs-td>
<vs-td :data="data[indextr].sales">
{{ data[indextr].sales }}
</vs-td>
<vs-td :data="data[indextr].products">
{{ data[indextr].products }}
</vs-td>
<vs-td :data="data[indextr].accessories">
{{ data[indextr].accessories }}
</vs-td>
<vs-td :data="data[indextr].basket">
{{ data[indextr].basket }}
</vs-td>
<vs-td :data="data[indextr].deliveries">
{{ data[indextr].deliveries }}
</vs-td>
<vs-td :data="data[indextr].amount">
{{ data[indextr].amount }}
</vs-td>
</vs-tr>
</template>
</vs-table>
</div>
</vx-card>
</div>
</template>
<script>
import { mapState } from "vuex";
import Countries from "../../http/Countries";
export default {
data() {
return {
selected: [],
'tableList': [
'vs-th: Component',
'vs-tr: Component',
'vs-td: Component',
'thread: Slot',
'tbody: Slot',
'header: Slot'
]
}
},
computed: {
...mapState({
activeCountries: state => state.activeCountries
})
},
mounted() {
Countries.activeCountries().then(response => {
this.$store.commit("ACTIVE_COUNTRIES", response.data.countries);
});
}
}
</script>
Here's how the Countries file method looks like:
activeCountries() {
return Api().get("/userCountries");
},
And this is the API setup:
import axios from "axios";
let BaseApi = axios.create({
baseURL: "http://127.0.0.1:8000/api/"
});
let Api = function() {
let token = localStorage.getItem("accessToken");
if (token) {
BaseApi.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}
return BaseApi;
};
export default Api;
The console error message indicates:
TypeError: Invalid attempt to spread non-iterable instance
It seems that the table rendering and API integration are causing issues. Could the 'mounted' function be the culprit? I've tried using 'created' and 'updated' without success.