[Vuejs]-How to highlight the class from an object prop in vue.js with laravel

by

0👍

I think you should do the following to highlight the mentioned respondent.

  1. Change your li tag as below code:

<li class="bg-blue flex flex-no-wrap items-center text-black cursor-pointer p-3" :class="{'highlight': conversation.respondent == respondent}">
<img class="flex justify-center items-center flex-no-shrink w-12 h-12 bg-grey rounded-full font-semibold text-xl text-white mr-3" :src="userAvatar" alt="">
<div class="flex-1 min-w-0">
<div class="flex justify-between mb-1">
<h2 class="font-semibold text-sm">
<i class="fas fa-users fa-fw"></i> {{ conversation.respondent }}
</h2>
<span class="text-sm">
<i class="fas fa-check fa-fw"></i>
10:00
</span>
</div>
<div class="text-sm truncate">
<span>
Some latest messages from this conversation.
</span>
</div>
</div>
</li>

  1. Add highlight class in your CSS part as below:

    .highlight {
    color: yellow;
    }

Leave a comment