How to update arrays in a vue.js loop reactively?

Question

In a blog-like Vue.js app I'd like to update list of comments of a post with new comments, when a new comment is successfully posted to the server.

Here is my code:

<div v-for="(post, index) in posts" :key="index" >  
    <div>{{post.body}}</div>
    <div class="comments">
        <ul v-for="(c, j) in post.comments" :key="j" class="comment">                      
          <li>{{c.user_id}} : {{c.body}} </li>
        </ul>    
    </div>

     <div>                  
        <input type="text" v-on:keyup.enter="submitComment(post)" v-model="post.comment" placeholder=" Add your comment" />                  
     </div>
</div>

And the method:

  submitComment(post) {
    const formData = new FormData();
    formData.append('token', this.token);
    formData.append('pid', post.id);
    formData.append('body', post.comment);
    axios.post(this.BASE_URL + "/api/comment", formData)
    .then( (res)=> {
      console.log('Updated comments are', res.data.comments);
      this.$set(post, 'comment', res.data.comments) ; //Here is the problem
    })
    .catch( error => {  
      console.log(error);
    });
  }

Despite the fact that I receive the updated list of comments, empty results is rendered. How can I fix this?

Can you please post the json response you get from the server? — VladNeacsu
– VladNeacsu, Commented Jan 16, 2019 at 10:21
should it be this.$set(post, 'comments', res.data.comments) with comments in plural form? — blaz
– blaz, Commented Jan 16, 2019 at 10:22
@VladNeacsu You are right. It was my silly mistake. Please answer and I'll accept. — qliq
– qliq, Commented Jan 16, 2019 at 10:22

slowFooMovement · Accepted Answer · 2019-01-17 09:29:35Z

1

as @blaz pointed out in the comments above, it looks like the error is from a typo in the $set method call as the property should be the plural comments not comment

answered Jan 17, 2019 at 9:29

slowFooMovement

5785 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update arrays in a vue.js loop reactively?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related