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和计算所得的属性无关。像我下面所做的那样，如果下次创建这样的代码段会更好。

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));
}

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

1 个答案: