Issue Resolved
I encountered a problem with a VueJS component that is supposed to load and display a list of services from the backend in a table. Despite successfully fetching data from the API, the table remained empty. This component is integrated with Laravel.
The VueJS Component I'm referring to is ResourceTable.vue:
<template>
<div>
<a class="button" v-on:click.native.prevent="services">Load</a>
<b-table :data="items" :columns="columns"></b-table>
{{items}}
<br>
{{ done }}
</div>
</template>
<script>
export default {
name: 'resource-table',
props: ['resource'],
data() {
return {
loading: false,
done: 'loading',
items: [],
columns: [{
field: 'name',
label: 'Name'
}],
host: 'http://services.local/api/v1'
}
},
methods: {
/*
* Load async data
*/
services: function() {
console.log('loading data');
this.loading = false;
// const vm = this;
axios.get(`${this.host}/${this.resource}`)
.then(({ data }) => {
this.items = data.data;
console.log(this.items)
this.loading = false;
this.done = 'loaded';
this.$toast.open('Data load complete')
})
}
},
mounted() {
this.services()
}
}
</script>
<style scoped>
</style><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<resource-table resource="workspaces"></resource-table>Although the API was functioning properly and returning data from the server, the table was not reflecting the updated information.
If I manually added values to the items array, they appeared in the table. However, the data retrieved from the API did not populate the table as expected.
Issue Resolved
The root cause was identified as a duplicate inclusion of a JavaScript file. Removing one instance solved the issue. Thank you to everyone who helped troubleshoot.