Как вызвать метод при использовании AXIOS в v-for Vuejs - PullRequest
Новая
       3

Как вызвать метод при использовании AXIOS в v-for Vuejs

0 голосов
/ 12 июня 2019

Я прочитал много статей, постов и вопросов в 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

Если response_id подано Нуль я получаю его как основной комментарий не как ответ комментария

в моем vuejs mount () я получу все комментарии со значением Null reply_id и принятые администратором из метода, названного getComments (), и вызову его в 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>

пока здесь мой компонент не работает хорошо. показывает только основные комментарии. image of main comments

теперь пришло время загружать ответы основных комментариев. я использую метод с именем 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-для основных комментариев, он будет непрерывно отправлять запрос и данные об изменениях в части ответа HTML. это действует как сумасшедший как изображение ниже. enter image description here

любая помощь будет оценена.

1 Ответ

0 голосов
/ 12 июня 2019

Эта строка {{getReplies(comment.id)}} создает эту проблему, getReplies() вызывается повторно и сбрасывается replies

Вы должны предварительно загрузить replies и сохранить его следующим образом 

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

};

ключи ( Now 1 and 2) вашего массива replies будут основным идентификатором комментария

И добавьте эту функцию в методы 

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>
...