How to compare results of two vuejs computed properties

Question

Our application has events that users can apply to, as well as blog posts written about different events. We want to show users all of the blog posts for events where they have applied.

Each post has an eventId and each application object contains event.id. We want to show all of the posts where the the eventId is equal to one of the application.event.id's.

Here are our computed properties...

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

How can we change meEventPosts to get the show the correct results? Thanks!

Answer 1

This question is mostly related to JS, not Vue and calculated properties. It will be better if you create such a code snippet the next time, as I did below.

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

So your myEventPosts computed property should look like:

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