Conditionally apply css class based on key value pair in a array, VueJS

Question

I have an array as shown in below picture. How do I add conditional CSS class to

based on the key sender_id of the array in VueJS ?

conditions: 1)if sender_id != sender_id : add arrived class 2)if sender_id == sender_id : add delivered class.

The goal is to add CSS styling as per the arrived or delivered message in a chat application.

tony19 · Accepted Answer · 2022-07-14 23:59:18Z

2

<div v-bind:class="{ 'myClass1': sender_id === sender_id, 'myClass2': sender_id !== sender_id }" class="otherClass"></div>

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2020 at 6:47

Evgeny Yudin

1434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ritu · Accepted Answer · 2020-02-21 06:54:24Z

1

Use ternary operation:

<span :class="todo.sender_id === sender_id ? 'delivered' : 'arrived'">{{message}}</span>

answered Feb 21, 2020 at 6:54

Ritu

666 bronze badges