Javascript VueJS子组件未呈现数据

我有一个屏幕，将其主要数据部分划分为多个选项卡，希望每个选项卡都有自己的组件

但是，由于某些原因，当组件首次渲染时，数据不会显示在组件上。问题是，如果您单击按钮刷新加载的数据，它就可以正常工作。我没有收到任何错误消息，所以我想我一定是误解了VueJS的生命周期

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));
        }
    }
};

const CommentScreen={
道具：{
帐号：{
类型：数字，
必填项：true
}
},
模板：`
刷新评论
{{props.item.entrydate}
{{props.item.entryuserforename+“”+props.item.EntryUserName}
{{props.item.comment}
`,
组成部分：{
“CommentForm”：CommentForm
},
数据（）{
返回{
评论标题：[
{文本：'Entry Date'，值：'entrydate'}，
{文本：'Entry User'，值：'EntryUserForName'}，
{文本：'Comment'，值：'Comment'}
],
评论：[]
}
}
,
安装的（）{
this.comments_get（）；
},
方法：{
评论{
让url=newURL（'/comments/'，document.location）；
url.searchParams.append（'accountid'，this.accountid）；
让选项={
方法：“GET”，
模式：“cors”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=UTF-8”
}
};
self=这个；
获取（url、选项）
.那么(
响应=>{
如果（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=[]；
}否则，如果（！response.ok）{
response.json（）
.然后（data=>self.$root.$emit（'displayalert'，data.errors））
.catch（error=>self.$root.$emit（'displayalert'，error.status+''+error.statusText））；
}否则{
response.json（）
.然后（data=>self.comments=data.comments）
.catch（错误=>self.$root.$emit（'displayalert'，error））；
}
}
)
.catch（错误=>self.$root.$emit（'displayalert'，error））；
}
}
};

请原谅上面的大量代码，我不确定我可以/应该删除哪些内容以使问题更简短

有谁能告诉我如何在第一次加载该组件时自动加载该组件上的数据

---

非常感谢。

挂载的

钩子是
异步的
，这使得这种方式很棘手



与您尝试做的事情类似的示例。


newvue({
el:“应用程序”，
数据：{
placeId:1，
见票人：“，
景象：[]，
幻灯片索引：1
},
安装的（）{
var self=这个；
取回(`https://jsonplaceholder.typicode.com/albums/${this.placeId}/photos？\u start=1&\u end=10`）
。然后（响应=>{
if（response.ok）{
返回响应；
}否则{
如果（response.status==401）{
警报（“401”）；
//self.$root.$emit（“notloggedin”）；
}
如果（response.status==403）{
警报（“403”）；
//self.$root.$emit（“显示警报”，“缺少权限：查看注释”）；
}
如果（response.status==204）{
警报（“204”）；
//self.comments=[]；
}
}
})
.then（response=>response.json（））
.catch（错误=>{
console.log（“错误”+错误）；
})
。然后（数据=>{
自我视距={
id:数据[0]。albumId
};
self.sightImages=数据；
})
/**如果你把它拿走，它就不会正常工作*/
.然后（（）=>{
self.showSlides（self.slideIndex）；
});
/** */
},
方法：{
放映幻灯片（n）{
让我；
让幻灯片=document.getElementsByClassName（“mySlides”）；
让dots=document.getElementsByClassName（“demo”）；
让captionText=document.getElementById（“caption”）；
如果（n>幻灯片长度）{
此.slideIndex=1；
}
if（n<1）{
this.slideIndex=slides.length；
}
对于（i=0；i
.demo游标{
宽度：3%！重要；
光标：指针；
保证金：0px 2px
}
.景观照片{
宽度：6%；
}
.行{
显示：内联块；
}
.cntrlbtn{
光标：指针；
}

视线Id:{{sight.Id}
{{index+1}}/{{sightImages.length}
❮
❯

self = this;

let self = this;