CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Kiow
Kiow

Reputation: 880

VueJS dynamic class

Reading the documentation I don't understand how I can change a class.

My component data looks like this:

props: [
  'm_c_id',
  'recipient_id',
  'sender_id',
  'userId'
],

Now if sender_id == userId I want to show this in my template:

<div class="msg-from-me">
   <p>Hello</p>
</div>

or if recipient_id == userId I want to show this:

<div class="msg-from-them">
   <p>Hello</p>
</div>

Upvotes: 2

Views: 912

Answers (1)

aprouja1
aprouja1

Reputation: 1810

You can also use the ternary operator to toggle classes:

<div v-bind:class="[sender_id === userId ? msg-from-me : msg-from-them]">

This way, if the only two options are sender_id or recipient_id, the proper class will toggle.

Upvotes: 3

Related Questions