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

Question

我们的应用程序包含用户可以申请的活动，以及关于不同活动的博客 post。我们想向用户显示所有博客 post 以了解他们已申请的活动。

每个 post 都有一个 eventId，每个应用程序对象都包含 event.id。我们要显示所有 post，其中 eventId 等于应用程序之一。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 计算属性的结果

How to compare results of two vuejs computed properties

vue.js

computed-properties