javascript - 当数据更改而没有刷新页面时如何自动更新vue组件

我已经使用axios提取了数据。但是看来vue组件在点击事件之后和数据更改时不会更新。因此，我必须刷新页面才能更新页面上的数据。您有解决此问题的简单方法吗？

这是模板中的代码。

<template>
  <div class="container">
    <h1>Latest Posts</h1>
    <div class="create-post">
        <label for="create-post">Add new post...</label>
        <input type="text" id="create-post" v-model="text" placeholder="Create a post">
        <button v-on:click="createPost">Post!</button>
    </div>

    <hr>

    <p class="error" v-if="error">{{ error }}</p>

    <div class="posts-container">
      <div class="post" v-for="(post, index) in posts" v-bind:item="post" v-bind:index="index" v-bind:key="post._id">
        {{`${post.createdAt.getDate()}/${post.createdAt.getMonth()}/${post.createdAt.getFullYear()}`}}
        <p class="text" id="example">{{post.text}}</p>
      </div>
    </div>

  </div>
</template>

这是脚本中的代码

<script>
import PostService from '../PostService';

export default {
  name: 'PostComponent',
  data() {
    return {
      posts: [],
      error: '',
      text: ''
    }
  },
    computed: {
      postText: function() {
        return this.post.text
      }
    },
    watch: {

    },
  async created() {
    try {
      this.posts = await PostService.getPosts();
      console.log(this.$el.textContent)
    } catch(err) {
      this.error = err.message;
    }
  },
  methods: {
    async createPost() {
      await PostService.insertPost(this.text);
      this.post = await PostService.getPosts();
    }
  }
}
</script>

最佳答案

我怀疑这行：
    this.post = await PostService.getPosts();
应该
    this.posts = await PostService.getPosts();这是一个Codepen链接。如果那不能解决您的问题，请确保PostService返回正确的对象。