This is my first time posting on stackoverflow!

I'm currently in the process of building a sort of social media webapp. I just started on the notifications page of the webapp. My issue is that different notifications have different templates. So while some notifications may include an image, other notifications do not. I've had success displaying a feed by looping through a JSON array with the id as the key, but I don't think I can do that with the notifications pane. Each notification has its separate ID, so looping through them isn't the issue. My main issue is that each notification has its own type attribute, and I want to display different div templates depending on the type, while looping through the JSON using the ID.

For clarification, I'm using the quasar cli for vue.js.

I'll attach my code for the loop below for some context.

Any help would be appreciated. I tried searching for this issue and found nothing, though that maybe an issue of me not knowing how to search properly.

<q-card
       class = "no-padding"
       style = "height: 150px;"
       v-for = "event in joinedEvents"
       :key = "event.id" flat> 

Basically, I want to be able to have the display an image if the notification type is 1 or display button if it is 2.

Thanks in advance!