javascript - 另一个 v-for 更新 props 的问题

Question

:key 已设置，前置功能正确完成了工作，但 v-for 没有更新。在 Vue 控制台中，对象“posts”已正确更新。我真的不明白为什么 v-for 不听修改。

<template>

    <div>

        <post-form v-on:newpost="prepend($event)"></post-form>

        <div id="posts" class="pt-4">

            <div v-for="post in posts" :key="post.id" class="alert" :class="alertClass(post.type_id)">
                {{ post.body }}
                <small>{{ post.user.name }} {{ post.updated_at | fromNow }}</small>
            </div>

        </div>

    </div>

</template>

<script>

    export default {
        props:['posts'],
        methods: {
            alertClass(type) {
                switch(type) {
                  case 1:
                    return "alert-secondary";
                    break;
                  case 2:
                    return "alert-success";
                    break;
                  case 3:
                    return "alert-danger";
                    break;
                  case 4:
                    return "alert-warning";
                    break;
                  case 5:
                    return "alert-info";
                    break;
                  default:
                    return "alert-light";
                }
            },
            prepend(event) {
                this.posts.unshift(event);
            }
        },
        filters: {
          fromNow: function (date) {
            return moment(date).fromNow();
          }
        }
    }
</script>

编辑 ：

“帖子”看起来像这样：

[
 {
  body: "dsf",
  created_at: "2019-02-15 08:55:16",
  deleted_at: null,
  id: 19,
  type_id: 1,
  updated_at: "2019-02-15 08:55:16",
  user: Object,
  user_id: 3
 }
]

我在其他类似的线程中没有找到遮篷，如果它是重复的，对不起

标签： javascriptarraysvuejs2vue-componentv-for