I have created a screen with tabs to organize different data sections, and each tab is meant to be its own component.
However, I am facing an issue where the data does not display on the component when it initially renders. Oddly enough, clicking the refresh button makes the data load perfectly fine. There are no error messages being shown, so I suspect there might be a misunderstanding of the VueJS lifecycle on my part.
const CommentScreen = {
props: {
accountid: {
type: Number,
required: true
}
},
template: `
<div>
<CommentForm
v-on:commentsupdated="comments_get"
v-bind:accountid="accountid"
></CommentForm>
<v-btn round color="primary" v-on:click="comments_get" dark>Refresh Comments</v-btn>
<v-data-table
:headers="commentheaders"
:items="comments"
hide-actions>
<template slot="items" slot-scope="props">
<td>{{ props.item.entrydate }}</td>
<td>{{ props.item.entryuserforename + " " + props.item.entryusersurname }}</td>
<td>{{ props.item.comment }}</td>
</template>
</v-data-table>
</div>
`,
components: {
'CommentForm': CommentForm
},
data(){
return {
commentheaders:[
{ text:'Entry Date', value:'entrydate' },
{ text:'Entry User', value:'entryuserforename' },
{ text:'Comment', value:'comment' }
],
comments:[]
}
}
,
mounted() {
this.comments_get();
},
methods:{
comments_get(){
let url = new URL('/comments/', document.location);
url.searchParams.append('accountid',this.accountid);
let options = {
method: 'GET',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
}
};
self = this;
fetch(url, options)
.then(
response => {
if (response.status === 401) {
self.$root.$emit('notloggedin');
} else if (response.status === 403) {
self.$root.$emit('displayalert','Missing Permission: View Comments');
} else if (response.status === 204) {
self.comments = [];
} else if(!response.ok) {
response.json()
.then(data => self.$root.$emit('displayalert', data.errors))
.catch(error => self.$root.$emit('displayalert', error.status + ' ' + error.statusText));
} else {
response.json()
.then(data => self.comments = data.comments)
.catch(error => self.$root.$emit('displayalert', error));
}
}
)
.catch(error => self.$root.$emit('displayalert', error));
}
}
};
Apologies for the lengthy code snippet above, I tried to include relevant details. Could someone please guide me on how to automatically load the data on this component when it first loads?
Thank you in advance for your help.