VueJS - V-for не выполняет повторную визуализацию после обновления данных и нуждается в обновлении страницы, чтобы увидеть изменения - PullRequest
Новая
       30

VueJS - V-for не выполняет повторную визуализацию после обновления данных и нуждается в обновлении страницы, чтобы увидеть изменения

3 голосов
/ 26 июня 2019

Таким образом, этот код добавляет или удаляет запись, но всякий раз, когда я добавляю или удаляю, он не показывает изменения или, скорее, перерисовывает. Мне нужно обновить страницу, чтобы увидеть, какие изменения произошли.

примечание: я использую стек ME (Vue) N.

У меня есть этот код: 

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

извините, если во фрагменте есть ошибка. Мне просто нужно было показать код, и я не могу заставить скрипт работать с примером кода {}.

Любая помощь будет признательна. Вуэйс новичок тут. Этот код копируется и вводится с помощью учебника YouTube.

1 Ответ

3 голосов
/ 26 июня 2019

Ваш компонент имеет свойство данных posts, но вы присваиваете this.post в нескольких местах кода.

Я подозреваю опечатку, но также стоит помнить, что если это дополнительное свойство(this.post) недоступен при создании экземпляра компонента, он (магическим образом) не будет преобразован в реактивное свойство при создании / назначении ему.

...