Question

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

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

我想我的问题如下：我该如何使Post.vue具有反应性，因为现在即使选择了另一个帖子，挂载的生命周期挂钩也将仅被调用一次。

这是代码：

Articles.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;
            }
        }
    }

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中，我将一个键附加到了post组件。我认为这是Vue知道要更新组件的哪个特定实例的方式。

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

1 个答案: