Vuejs：选择另一个选择选项时如何启用选择选项

Posted 2023-02-16

【中文标题】Vuejs：选择另一个选择选项时如何启用选择选项

【英文标题】：Vuejs:How to enable select option when another select option is selected

【发布时间】：2020-12-28 16:28:17

【问题描述】：

我正在使用库vue-search-select 来禁用使用isDisabled 的选择选项。最初，specialty 上的选择选项被禁用。当hospital被选中时我想要它，然后禁用specialty消失。

这是我的看法：

还有我的代码：

<model-list-select :list="hospital"
    v-model="optHospital"
    @change="getSpeciality"
    option-value="id"
    option-text="hospital_name"
    placeholder="Choose Hospital">
</model-list-select>

<model-list-select :list="speciality"
    isDisabled
    v-model="optSpeciality"
    @change="getDoctor"
    option-value="specialist_id"
    option-text="specialist_name"
    placeholder="Choose Speciality">
</model-list-select>

谢谢。

【参考方案1】：

您可以根据第一个选择的值有条件地禁用它，例如当第一个选择未定义时禁用它，就像这样：

<model-list-select :list="hospital"
    v-model="optHospital"
    @change="getSpeciality"
    option-value="id"
    option-text="hospital_name"
    placeholder="Choose Hospital">
</model-list-select>

<model-list-select :list="speciality"
    :isDisabled="optHospital === undefined" // here
    v-model="optSpeciality"
    @change="getDoctor"
    option-value="specialist_id"
    option-text="specialist_name"
    placeholder="Choose Speciality">
</model-list-select>