: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
}
]
我在其他类似线程中找不到遮篷,抱歉,如果重复的话