CODEWITHSUNDEEP
javascriptexpressvue.jsasynchronousv-for
code_specimen11
code_specimen11

Reputation: 39

VueJS - V-for doesn't re-render after data is updated and needs page refresh to see the change

So this code does adds or delete an entry, But whenever I add or delete, it does not show the changes or rather re-render. I need to refresh the page in order to see what changes had.

note: I am using ME(Vue)N stack.

I have this code: 

<script>
import postService from '../../postService';
export default {
  name: 'postComponent',
  data() {
    return {
      posts: [],
      error: '',
      text: ''
    }
  },
  async created() {
    try {
      this.posts = await postService.getPosts();
    }catch(e) {
      this.error = e.message;
    }
  },
  methods: {
    async createPost() {
      await postService.insertPost(this.text)
      this.post =  await postService.getPosts();
      // alert(this.post,"---")
    },
    async deletePost(id) {
      await postService.deletePost(id)
      this.post = await postService.getPosts();
      
      // alert(this.post)
    }
  }
}
</script>
<template>
    <div class="container">
      <h1>Latest Posts</h1>
      <div class="create-post">
        <label for="create-post">input...</label>
        <input type="text" id="create-post" v-model="text" placeholder="Create a post">
        <button v-on:click="createPost">Post</button>
      </div>
      <!-- CREATE POST HERE -->
      <hr>
      <p class="error" v-if="error">{{error}}</p>
      <div class="posts-container">
        <div class="post"
          v-for="(post) in posts"
          v-bind:key="post._id"
          v-on:dblclick="deletePost(post._id)"
        >
        {{ `${post.createdAt.getDate()}/${post.createdAt.getMonth()}/${post.createdAt.getFullYear()}`}}
        <p class="text">{{ post.username }}</p>
        </div>
      </div>
    </div>
</template>

sorry if there's an error in the snippet. I just needed to show the code and I cant make the script work on the code sample {}.

Any help would be appreciate. Vuejs beginner here. This code is copied and typed through a youtube tutorial.

Upvotes: 3

Views: 1518

Answers (1)

spender
spender

Reputation: 120480

Your component has a data property posts, but you're assigning to this.post in several places in the code.

I suspect a typo, but it's also worth remembering that if this additional property (this.post) isn't available when the component is instantiated, it won't be (magically) converted into a reactive property when you create/assign to it.

Upvotes: 3

Related Questions