基于选择值的Vue多选CSS答案

【问题标题】：Vue Multiselect CSS based on value of select基于选择值的Vue多选CSS
【发布时间】：2020-03-29 07:26:39
【问题描述】：

我正在尝试根据值设置输入的多选样式。当我像下面这样将条件放入 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>

结果是这样的：

我们的目标是让多选橙色像这样

问题是我的 html 模板中没有 multiselect.multislect_input，所以我可以根据它的值设置多选的样式吗？例如橙色表示已存档，红色表示已过期？

【问题讨论】：

请提供有关您的 css 类和呈现的 html 代码的更多信息。一个工作代码最少的 jsfiddle 会有很大帮助。

标签： vuejs2 vue-multiselect

【解决方案1】：

你必须首先在 css 中有一个颜色类。例如：

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

然后你就可以在 vue 中使用这些类了。喜欢：

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

【讨论】：

我正在使用 vuetify，所以我提到的代码是有效的，但它适用于整个类而不是多选部分。我只需要“归档”这个词是橙色的
你可以试试这个campaignStatus.value ===' <span class="orange">ARCHIVED</span>'
选择框的数据从哪里插入？