Filter array to generate different arrays in vue

Question

So I have an array with notifications for everyone in a sales company. They have different idTypes depending on what kind of notification it is. And there is the user that's logged in and then it is the user that did the sale. Some of the notifications should only be visible to the user logged in and some can be visible to everyone.

notifications: [
  0: {
    idType: 1
    type: "delivered"
    user: 12
    visibility: true
    seller: 15
    product: "phone"
  }
  1: {
    idType: 2
    type: "meeting"
    user: 12
    visibility: null
    seller: 12
    company: "hotell"
  }
  2: {
    idType: 1
    type: "invoiced"
    user: 15
    visibility: null
    seller: 11
    value: 150000
  }
]

So if I'm user: 12 I should only be able to see the first to objects in the array (user and seller id are the same). And I can't figure out how to do it. I've tried doing different computeds and methods.

I have one small component for just the card where you should see a image of the seller (sending 'note' as a prop):

<div class="d-flex justify-space-between">
    <div class="ml-4 d-flex justify-space-between align-center">
        <seller :id="note.seller" v-slot="{ seller }">
            <user-avatar :src="seller.profileImage" :size="36" class="mr-3 mr-sm-5 
            ml-n3 ml-sm-0"
        /></seller>
        <div class="d-flex flex-column">
            <h6 class="font-weight-bold">{{ note.title }}</h6>
            <slot name="info" />
        </div>
    </div>
</div>

And then I have a component that looks something like this where I import above one since it should be different values in every card:

         <activity :note="note">
            <template #info>
                <span v-if="note.idType === 1">
                    {{ note.type }} {{ note.product }}
                </span>
                <span v-if="note.idType === 3">
                    {{ note.type }} for {{ note.value }} $
                </span>
            </template>
          </activity>

And then I import this into another component to render all different notifications, here is where I access the array:

<div v-for="(note, idx) in notifications" :key="idx">
    <activity
        class="white my-3"
        :note="note"
    />
</div>

So I've tried doing different computed and methods but nothing seems to work.

I know I need to do some if statements to generate the different arrays. But should I do it in a computed or a method? What's the best way to go about it? I'm using javascript/typescript

Answer 1

You just have to use computed property to fiter down your notification.

computed() {
    filteredNotifications: function(){
        return this.notifications.filter(node => node.seller === this.currentUserId)
    },
},

Where currentUserId is the id of current user

And inside the template use this computed property to iterate the component as below

<div v-for="(note, idx) in filteredNotifications" :key="idx">
    <activity
        class="white my-3"
        :note="note"
    />
</div>