使用vuejs更改禁用的下拉文本的颜色

Question

我要寻找的是当我选择一个项目时希望在下拉列表中禁用该选项。以下代码可以正常工作，但是禁用文本的颜色太浅。我想使其更暗，甚至使用自举颜色类（主要，次要）。

是否可以在vuejs代码中更改禁用文本的颜色，还是可以在CSS中进行更改？

HTML / vuejs：

<option v-for="chores in chores.Data" :key="chores.ChoreId" v-bind:value="chores.ChoreId" :disabled="dailyChoreCheck(chores.ChoreId)">{{chores.ChoreName}}</option>

功能

：

  dailyChoreCheck: function(selectedChoreId){
        var vm = this;
        if(vm.customChores.length > 0){
            return vm.customChores.filter(function(item) {
                return  item.choreId == selectedChoreId && item.dayName == "Daily";
            }).length > 0;
        }
  }

Answer 1

需要

css来设置禁用文本的样式。您可以通过以下方式设置禁用的选项元素的样式：

option:disabled {
   color: #abcdef;
}

或使用Vue的dynamic class向这些禁用的选项添加自定义类，然后在其上使用CSS。

对我来说，前一种方法更简单。