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

Posted 2023-02-22

【中文标题】v-for Vuejs中使用AXIOS时如何调用方法

【英文标题】：How to call a method when using AXIOS in v-for Vuejs

【发布时间】：2019-10-26 21:02:13

【问题描述】：

我在 *** 和其他网站上阅读了很多文章、帖子和问题，但没有得到我的答案。我正在为我的 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"   >
        <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"   >
                                    <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"   >
                                                <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 回复部分中的更改数据。它就像下图一样疯狂。

我们将不胜感激。

【问题讨论】：

Axios 是一个基于 Promise 的 HTTP 库，所以你必须异步使用它。将调用函数设为async getReplies()...，将axios设为await axios.get...

@LenJoseph 谢谢老兄的回答。但它不起作用，但它又像 gif 一样。

尝试将您的v-ifs 更改为v-shows，并在created() 期间调用数据方法而不是mounted()

@LenJoseph 我应用了更改，但它像 GIF 一样疯狂

@LenJoseph 我认为它与挂载无关，因为我在 v-for 中间使用 getReplies(comment.id) 来调用函数以获取当前主要评论的回复

【参考方案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"   >
    <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>

【讨论】：

我不想在我的组件中通过巨大的 JSON 获得所有 cmets 的回复。当主要评论显示时，我需要通过 v-for 的每一步得到我的回复