[Vuejs]-How to call a method when using AXIOS in v-for Vuejs

by

0👍

This line {{getReplies(comment.id)}} create that issue, getReplies() called repeatedly and resetting replies

You must preload the replies and store it like this

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

};

The keys( Now 1 and 2) of your replies array will be main comment id

And add this function in methods

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

Change the code like this

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

Leave a comment