道具的另一个v-for更新问题

时间:2019-02-15 08:13:12

标签: javascript arrays vuejs2 vue-component v-for

: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
 }
]

我在其他类似线程中找不到遮篷,抱歉,如果重复的话

0 个答案:

没有答案