CODEWITHSUNDEEP
vuejs2vue-multiselect
biillitil
biillitil

Reputation: 141

Vue Multiselect CSS based on value of select

I am trying to style the multi select of an input based on the value. when i put the condition in vue like the following i am getting the color on all the div including the label here is my code

<custom-select 
  :class="{
    orange : campaignStatus.value ==='ARCHIVED' || campaignStatus.value ==='PAUSED',
    red : campaignStatus.value ==='BANNED' || campaignStatus.value ==='REMOVED'
  }"
  v-model="campaignStatus"
  deselectLabel="Selected"
  label="Status"
  :options="statusOptions" 
  name="status" 
  data-test="campaign-status"
  disabled>
</custom-select>

and the result is this: enter image description here

the goal is to have just the multi-select colored orange like that enter image description here

the issue is that i dont have the multiselect.multislect_input in my html template so i can i style the multiselect based on its value? for example orange for archived and red for expired?

Upvotes: 0

Views: 1375

Answers (1)

Mahmud hasan
Mahmud hasan

Reputation: 1046

You must have a class of color in css first. For example:

.orange{color:orange}
.red{color:red }

And then you can use these classes in vue. Like:

:class="{'orange': campaignStatus.value === ARCHIVED , 'red': campaignStatus.value === EXPIRED}"

Upvotes: 0

Related Questions