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

【问题标题】：change color of disabled drop down text with vuejs使用 vuejs 更改禁用下拉文本的颜色
【发布时间】：2018-09-05 03:53:59
【问题描述】：

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

有没有办法在 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;
        }
  }

【问题讨论】：

您是否将 Vue SFC 用于特定组件？如果是这样，只需 <style> 中的作用域 css 即可实现这一目标。
@RuChernChong - 不，我不是。你能提供那个链接吗？我从来没有听说过。
看看这个：vue-loader.vuejs.org/guide/scoped-css.html

标签： twitter-bootstrap vue.js vuejs2

【解决方案1】：

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

option:disabled {
   color: #abcdef;
}

或使用 Vue 的 dynamic class 将自定义类添加到那些禁用的选项，然后在它们上使用 css。

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

【讨论】：

这是正确的。理想的方法是将其放入特定组件的作用域样式中。
@MarkFeng - 动态类的东西看起来真的很酷。我可以捕获一个声明它已禁用的属性（将其设置为我的检查），但我似乎无法切换禁用选项的类。只是残障人士。关于如何仅针对禁用选项的任何想法？
@webdad3 在这里检查我的代码：jsfiddle.net/Mark_f/fvmyx7za。据我所知，css 不适用于本机选择元素的选项，但可以添加动态类。您可以检查 web 检查器中的选项元素，并查看禁用的选项是否可以作为目标。