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

Posted 2023-02-16

【中文标题】VueJS - V-for 在数据更新后不会重新渲染，需要刷新页面才能看到更改

【英文标题】：VueJS - V-for doesn't re-render after data is updated and needs page refresh to see the change

【发布时间】：2019-11-08 07:13:16

【问题描述】：

所以这段代码确实添加或删除了一个条目，但是每当我添加或删除时，它不会显示更改或重新渲染。我需要刷新页面以查看发生了哪些变化。

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

抱歉，如果 sn-p 中有错误。我只需要展示代码，我无法让脚本在代码示例 上运行。

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

【参考方案1】：

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

我怀疑是错字，但也值得记住的是，如果在实例化组件时此附加属性 (this.post) 不可用，则在您创建/分配给它。

【讨论】：

谢谢！！！我找到了。也许我太累了，无法编码，我根本没有注意到错字。诚实的错误。我的错。