组件发出异步服务器请求中的 Vue 反应性问题

Question

少量上下文：我有一个叫做 Articles 的 Vue 视图。当组件挂载到 DOM 时，我使用 axios 库(结合 Laravel 控制器和 API 路由(从数据库中获取所有帖子。文章视图包含一个名为active的数据属性，该属性指向当前选择的帖子。单击侧边栏中的其他帖子会更新active，随后会显示新帖子。

现在，每个帖子都有很多评论，如果您愿意，这些评论反过来可以链接到子评论。但是，Articles.vue中挂载的生命周期钩子只被调用一次，当我尝试将服务器请求放入updated()时，一切似乎都正常，但我最终会得到 429 状态(请求太多(。我的猜测是，对于检索到的每个注释，都会再次调用 getupdated()中的代码。

我想我的问题如下：我怎样才能使Post.vue反应式，因为现在即使选择了另一个帖子，挂载的生命周期钩子也只会被调用一次。

代码如下：

文章.vue

export default {
name: "Articles",
components: {SidebarLink, PageContent, Sidebar, Post, Searchbar, Spinner},
data() {
return {
posts: [],
active: undefined,
loading: true
}
},
mounted() {
this.fetchPosts();
},
methods: {
async fetchPosts() {
const response = await this.$http.get('/api/posts');
this.posts = response.data;
this.active = this.posts[0];
setTimeout(() => {
this.loading = false;
}, 400);
},
showPost(post) {
this.active = post;
}
}
}

帖子.vue

export default {
name: "Post",
components: {Tag, WennekesComment},
props: ['post'],
data() {
return {
expanded: true,
comments: []
}
},
mounted() {
this.fetchComments();
},
methods: {
async fetchComments() {
let response = await this.$http.get('/api/posts/' + this.post.id + '/comments');
this.comments = response.data;
}
}
}

WennekesComment.vue

export default {
name: "WennekesComment",
props: ['comment'],
data() {
return {
subComments: []
}
},
mounted() {
this.fetchSubcomments();
},
methods: {
fetchSubcomments() {
let response = this.$http.get('/api/comments/' + this.comment.id).then((result) => {
// console.log(result);
});
}
}
}

模板逻辑

<wennekes-comment v-for="comment in comments" :key="comment.id" :comment="comment"></wennekes-comment>

<post v-if="!loading" :post="active" :key="active.id"/>

提前感谢，如果这个问题有些不清楚，我深表歉意，我有点不知所措。

问候

莱恩

更新

我想我让它工作了。在Articles.vue中，我为post组件附加了一个键。我认为这是 Vue 知道要更新的组件的特定实例的方式。

Answer 1

我想我让它工作了。在 Articles.vue 中，我在帖子组件中附加了一个键。我认为这是 Vue 知道要更新的组件的特定实例的方式。