如何比较两个 vuejs 计算属性的结果

Question

我们的应用程序有用户可以申请的事件，以及关于不同事件的博客文章。我们希望向用户展示他们申请的所有博客帖子。

每个帖子都有一个 eventId，每个应用程序对象都包含 event.id。我们希望显示所有 eventId 等于 application.event.id 之一的帖子。

这是我们的计算属性...

computed: {
...mapState(['posts', 'currentUser', 'applications']),
myApplications: function() {
  return this.applications.filter((application) => {
    return application.user.id === this.currentUser.uid
  })
},
myEventPosts: function() {
  return this.posts.filter((post => {
    post.eventId.includes(this.myApplications.event.id)
  })
}

我们如何更改 meEventPosts 以获得正确的结果？ 谢谢！

Answer 1

这个问题主要和JS有关，不是Vue和计算属性。如果你下次创建这样的代码sn -p会更好，就像我在下面做的那样。

const posts = [{eventId: 1, name: 'Post 1'}, {eventId: 2, name: 'Post 2'}, {eventId: 3, name: 'Post 3'}];
const myApplications = [{eventId: 2, name: 'App 2'}];
const myEventPosts = function () {
	const eventsIds = myApplications.map((app) => app.eventId);
	return posts.filter((post) => eventsIds.includes(post.eventId));
}

console.log('posts:', myEventPosts());

所以您的 myEventPosts 计算属性应该如下所示：

myEventPosts: function() {
    const eventsIds = this.myApplications.map((app) => app.eventId);
    return this.posts.filter((post) => eventsIds.includes(post.eventId));
}