In order to change the icon image of a notification based on its type without using conditions, you can implement a switch statement. There are three types of notifications:
notifications_type:
- answer_created
- user_subscribed
- answer_selected
The icon image is located inside an i tag within a span tag. To achieve this using a switch statement, you need to bind a function to the span element with the v-bind directive.
Below is an example code snippet that demonstrates how to accomplish this:
<div class="media g-mb-20">
<span v-bind="changeIcon" class="u-icon-v3 g-rounded-50x g-mt-2 g-mr-15 g-height-40 g-width-40 g-bg-gray-light-v5">
<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>
</span>
<a href="#"
class="media-body g-brd-around g-brd-gray-light-v4 g-py-10 g-px-15 g-bg-gray-light-v5--hover u-link-v5 g-rounded-3">
<p class="mb-0 g-font-size-16 g-color-gray-dark-v3">
<span class="g-font-stag-medium">{{ item.message }}</span>
</p>
</a>
</div>
You can add the necessary logic inside the changeIcon function to handle the switch statement and update the icon image for each notification type.