изменить цвет отключенного выпадающего текста с помощью 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 , чтобы добавить пользовательские классы к этим отключенным параметрам и затем использовать css для них.

Для меня прежний подход проще.