刷新数组对象时出错

Question

我有一个包含对象列表(数据库中的所有帖子(的数组，我希望能够更新对象中的一个值，并用更新后的对象刷新数组。

这是显示所有文章的HTML组件：

<tbody>
<tr v-for="(post, index) in posts" :key="index">
<td><router-link :to="`/admin/article/${ post.slug }`">{{  }}</router-link></td>
<td>{{ post.lang === 'fr' ? 'Français' : 'English' }}</td>
<td>{{ !!post.draft ? 'Draft' : 'Published' }}</td>
<td>{{ formatDate(post.created_at) }}</td>
<td>{{ formatDate(post.updated_at) }}</td>
<td>
<div class="actions">
<span @click="handlePublish(post.id)">{{ !!post.draft ? 'Publish' : 'Unpublish' }}</span>
|
<router-link :to="`/admin/article/edit/${post.slug}`">Edit</router-link>
|
<span @click="handleDelete(post, index)">Delete</span>
</div>
</td>
</tr>
</tbody>

以下是我正在努力解决的handlePublish()方法：

handlePublish (id) {
this.$axios.post('/post/publish', {id: id}, {
headers: {
'Authorization': `Bearer <some token>`
}})
.then(response => {
console.log(response) // returns the updated object without trouble
this.posts = this.posts.map((post, index) => {
if (post.id === id) {
return response.data
}
})
})
.catch(e => console.log(e.response))
}

当我触发handlePublish方法时，我会得到错误，比如

"无法读取未定义的属性'slug'"。

段塞包含在内容的router-link中。如果我删除它，错误将是关于标题。

如果非要我猜测一下，我会说问题发生在VueJS将旧数据交换为新数据的时候。

如何解决此问题？

提前谢谢。

Answer 1

您应该添加else并在else块中返回未更新的帖子，如下所示：

this.posts = this.posts.map((post, index) => {
if (post.id === id) {
return response.data
}else{
return post;//<----
}
})

在您的代码中，您返回的数组类似于：

[undefined,undefined,undefined,<updatePost>,undefined,undefined ...]

JS示例，说明您得到的错误

let posts = [{
id: 1,
content: "aaa"
}, {
id: 2,
content: "bbb"
}, {
id: 3,
content: "ccc"
}]
let updatedpost = {
id: 2,
content: "more content"
};
posts = posts.map(post => {
if (updatedpost.id == post.id) {
return updatedpost;
}
})
console.log(posts)
posts = [{
id: 1,
content: "aaa"
}, {
id: 2,
content: "bbb"
}, {
id: 3,
content: "ccc"
}]
posts = posts.map(post => {
if (updatedpost.id == post.id) {
return updatedpost;
} else {
return post;
}
})
console.log(posts)