<template>
<div>
<!--
This is the all websites table component.
-->
<div v-if="websites.length > 0">
<websites-ShowAllWebsites :websites="websites" />
</div>
</div>
</template>
<script>
/*
This imports the mapState from vuex.
*/
import { mapState } from 'vuex';
/*
This is the all websites page component.
*/
import WebsitesShowAllWebsites from '~/components/websites/ShowAllWebsites.vue';
/*
This is the default export.
*/
export default {
/*
This is the layout for the page.
*/
layout: 'index',
/*
This is the name for the page.
*/
name: 'Websites',
async created() {
await this.$store.dispatch('websites/all')
},
/*
This maps the websites from the store.
*/
computed: {
...mapState('websites', {
websites: state => state.websites,
}),
},
/*
This is the components for the page.
*/
components: {
WebsitesShowAllWebsites
}
};
</script>
The component is loading before the websites state has loaded, thus the component not actually getting any websites data, how can I address this, I've tried everything now and cannot fix it.
I've tried .length etc to no avail, the data being returned looks like: { "items": [ {} ] } with items being populated with website data, but I believe the issue is what I have said above, just don't know how to fix it.
