Question

因此，此代码确实添加或删除了一个条目，但是无论何时添加或删除，它都不会显示更改或重新呈现。我需要刷新页面以查看所做的更改。

注意：我正在使用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>

很抱歉，如果代码段中有错误。我只需要显示代码，而无法使脚本在代码示例{}上工作。

任何帮助将不胜感激。 Vuejs初学者在这里。这段代码是通过youtube教程复制并键入的。

Answer 1

您的组件具有数据属性posts，但是您正在代码中的多个位置分配给this.post。

我怀疑是拼写错误，但是还应该记住，如果在实例化组件时此附加属性（this.post）不可用，那么当您使用该属性时，将不会（神奇地）将其转换为反应性属性创建/分配给它。

VueJS-V-for在数据更新后不会重新呈现，需要刷新页面才能看到更改

1 个答案: