Vue Multiselect CSS в зависимости от значения select - PullRequest
Новая
       30

Vue Multiselect CSS в зависимости от значения select

0 голосов
/ 29 марта 2020

Я пытаюсь стилизовать мульти-выбор входа на основе значения. когда я помещаю условие в vue, как показано ниже, я получаю цвет на всех элементах div, включая метку, вот мой код 

<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>

, и в результате получается: enter image description here

цель состоит в том, чтобы иметь только несколько выделенных оранжевых цветов вот так enter image description here

проблема в том, что у меня нет multiselect.multislect_input в моем html шаблон, чтобы я мог стилизовать множественный выбор на основе его значения? например оранжевый для архива и красный для просроченного?

1 Ответ

0 голосов
/ 29 марта 2020

Сначала у вас должен быть класс цвета в css. Например: 

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

И тогда вы можете использовать эти классы в vue. Нравится: 

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