Vue.js 3中如何根据disabled属性禁用/启用下拉选择框（combobox）

你不需要通过手动操作DOM的方式实现禁用，Vue提供了更简洁的响应式绑定方案：

• 直接在<select>标签上使用**:disabled指令**绑定你定义的disabled props即可
• 同时修正模板里的几个语法问题（label的for属性绑定、option的value绑定）
• 移除不必要的computed（computed用于计算值，不适合做DOM操作这类副作用）

修正后的完整代码 #

<template>
    <div class="combobox">
        <!-- 修正：label的for属性用v-bind绑定 -->
        <label :for="selector_name">
            <p>{{ selector_title }}</p>
        </label>
        <!-- 核心：添加:disabled="disabled"绑定 -->
        <select 
            :name="selector_name"  
            :id="selector_id" 
            :disabled="disabled"
            @change="onChange"
        >
            <!-- 修正：option的value用v-bind绑定 -->
            <option v-for="(opt, index) in selector_options" :key="`opt ${index}`" :value="opt">
                {{ opt }}
            </option>
        </select>
    </div>
</template>

<script lang="js">
export default {
    name: 'ComboBox',
    props: {
        selector_title: {
            type: String,
            required: true
        },
        selector_name: {
            type: String,
            required: true
        },
        selector_id: {
            type: String,
            default: "combobox"
        },
        selector_options: {
            type: Array,
            required: true
        },
        disabled: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onChange(event) {
            console.log(event.target.value);
        },
    },
    // 移除原来的computed，不需要直接操作DOM
}
</script>

<style>
.combobox{
    max-width: 140px;
    position: relative;
    margin: auto;
    padding: 20px;
    border-radius: 6px;
    font-size:20pt;
    font-weight: bold;
    text-align: center;
    background-color: #474444;
}

.combobox select {
    background-color: #474444;
    color: rgb(220, 226, 250);
    width: 140px;
    font-size:16pt;
    text-align: center;
    font-weight: bold;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 6px;
    padding: 5px;
}

/* 可选：给禁用状态添加样式，增强视觉反馈 */
.combobox select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    border-color: #666;
}
</style>

关键说明 #

1. :disabled="disabled"绑定：Vue会自动根据disabled props的布尔值，为select标签添加或移除disabled属性，完全符合响应式逻辑，不需要手动操作DOM。
2. 修正label的for属性：原来的for={{selector_name}}写法错误，Vue中动态绑定属性需要用:for="selector_name"。
3. 修正option的value：原来的value=opt会把value设置为字符串"opt"，正确的绑定应该是:value="opt"，这样才能把option的value设置为数组中的对应值。
4. 移除computed：你的computed里直接操作DOM的方式不符合Vue的设计理念，Vue鼓励通过数据驱动视图，而不是直接操作DOM。

可选：监听disabled状态变化 #

如果需要在disabled属性变化时执行额外逻辑，可以添加一个watch：

watch: {
    disabled(newVal) {
        // 这里可以添加状态变化后的额外操作
        console.log('下拉框禁用状态变更:', newVal);
    }
}

内容的提问来源于stack exchange，提问作者Bilal