v-for Vuejs中使用AXIOS时如何调用方法

Question

我在 StackOverflow 和其他网站上阅读了很多文章、帖子和问题，但没有得到我的答案。我正在为我的 Laravel 项目实现一个简单的评论和回复组件。

* 我有一个如下表：*

id  |  name  | body              | reply_id | status
---------------------------------------------------------
1   | bran   |   good            |   null   |   accepted
2   | sansa  |  awe full article |   1      |   accepted
3   | jan    | soo Cool          |   1      |   accepted
4   | nightK | dont post it again|   Null   |   accepted
5   | kalici |        wow nice   |   Null   |   accepted
6   | worm   |         why ??    |  4       |   accepted

如果 reply_id 提交为 Null 我将其视为 主要评论 而不是 回复强烈>评论

在我的 vuejsmounted() 中，我将从 getComments() 命名的方法中获取所有为 Null reply_id 并被管理员接受的 cmets，并在 mount() 中调用它。 我也在使用 laravel 分页 我的getComments如下vue代码：

getComments(page = 1) {

        var self = this;
        axios.get('/comment/pagination/+post_id+ '?page=' + page)
            .then(function(response) {
                self.comments = response.data;
            });

并用打击 html 和 vuejs 标签显示它：

<div v-for="comment in comments.data" :key="comment.id" class="comments">
    <div class="media comment" v-if="comment.reply==null">
        <img src="/images/avar.png" width="50px" height="50px" alt="image">
        <div class="media-body">
                <h6 v-if="comment.user"> {{ comment.user['f_name'] }}  {{ comment.user['l_name'] }} </h6>
                <h6 v-if="!comment.user">{{ comment.name }}</h6>
            <ul class="list-inline">
                <li class="list-inline-item"><span class="fa fa-calendar"></span>{{ comment.created_at }}</li>
                <li class="list-inline-item"><a href="#">Reply</a></li>
            </ul>
            <p>
                {{ comment.body }}
            </p>

        </div>
    </div>
    <hr>
</div>

直到这里我的 组件 运行良好。仅显示主要 cmets。

现在是时候加载主要 cmets 的回复了。 我使用名称为 getReplies 的方法：

getReplies(MainCommentId) {

    console.log(MainCommentId);
    var self = this;
    axios.get('/comment/replies/' + MainCommentId)
        .then(function(response) {
            console.log(response.data.data);
            self.replies = response.data.data;
        });
},

然后我将主要评论视图更改为以下：

<div v-for="comment in comments.data" :key="comment.id" class="comments">
                                <div class="media comment">
                                    <img src="/images/avar.png" width="50px" height="50px" alt="image">
                                    <div class="media-body">
                                            <h6 v-if="comment.user"> {{ comment.user['f_name'] }}  {{ comment.user['l_name'] }} </h6>
                                            <h6 v-if="!comment.user">{{ comment.name }}</h6>
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><span class="fa fa-calendar"></span>{{ comment.created_at }}</li>
                                            <li class="list-inline-item"><a href="#">Reply</a></li>
                                        </ul>
                                        <p>
                                            {{ comment.body }}
                                        </p>
                                            <!-- Nested Comment -->
                                            {{  getReplies(comment.id) }}
                                            <div v-for="reply in replies" :key="reply.id" class="media comment">
                                                <img src="/images/avar.png" width="50px" height="50px" alt="image">
                                                <div class="media-body">
                                                    <h6 v-if="reply.user"> {{ reply.user['f_name'] }}  {{ reply.user['l_name'] }} </h6>
                                                    <h6 v-if="!reply.user">{{ reply.name }}</h6>
                                                    <ul class="list-inline">
                                                        <li class="list-inline-item"><span class="fa fa-calendar"></span>{{ reply.created_at }}</li>
                                                        <li class="list-inline-item"><a href="#">Reply</a></li>
                                                    </ul>
                                                    <p>
                                                        {{ reply.body }}
                                                    </p>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <hr>
                            </div>

但是当它想通过 v-for main cmets 的每一步通过该方法获得回复时，它会不断发送请求和 HTML 回复部分中的更改数据。它就像下图一样疯狂。

我们将不胜感激。

Answer 1

这条线{{getReplies(comment.id)}}创建那个问题，getReplies()被反复调用并重置replies

您必须预加载replies 并像这样存储它

 this.replies = {
    '1': [{
            'message': "test"
        },
        {
            'message': "test"
        },
    ],
    '2': [{
            'message': "test"
        },
        {
            'message': "test"
        },
    ]

};

replies 数组中的 keys( Now 1 and 2) 将是主评论 ID

并在方法中添加此功能

methods : {
        getReply (commentID) {
          return this.replies[commentID];
         }
     }

这样改代码

<div v-for="reply in  getReply(comment.id)" :key="reply.id" class="media comment">
    <img src="/images/avar.png" width="50px" height="50px" alt="image">
    <div class="media-body">
        <h6 v-if="reply.user"> {{ reply.user['f_name'] }}  {{ reply.user['l_name'] }} </h6>
        <h6 v-if="!reply.user">{{ reply.name }}</h6>
        <ul class="list-inline">
            <li class="list-inline-item"><span class="fa fa-calendar"></span>{{ reply.created_at }}</li>
            <li class="list-inline-item"><a href="#">Reply</a></li>
        </ul>
        <p>
            {{ reply.body }}
        </p>
    </div>
</div>