基于选择框选中值切换后续选择框的禁用状态

没问题，我来帮你搞定这个需求！核心思路是利用Vue的动态绑定，根据前一个下拉框的选中状态来控制后一个的禁用状态。下面是具体的实现步骤和修改后的代码：

关键修改点 #

• 移除多余的:value属性：因为v-model已经完成了双向数据绑定，重复写:value会造成冗余甚至冲突。
• 动态绑定disabled属性：通过判断前一个下拉框的选中值是否存在，来决定当前下拉框是否可用。

修改后的完整代码 #

<div>
  <div class="col-md-3 ml-1 mr-1 mt-1">
    <div class="mt-2">Input Info 1</div>
    <b-form-select v-model="id.Input1" :options="filteredJSON1"></b-form-select>
  </div>
  <div class="col-md-3 ml-1 mr-1 mt-1">
    <div class="mt-2">Input Info 2</div>
    <!-- 当Input1未选中时禁用，选中后自动启用 -->
    <b-form-select v-model="id.Input2" :options="filteredJSON2" :disabled="!id.Input1"></b-form-select>
  </div>
  <div class="col-md-3 ml-1 mr-1 mt-1">
    <div class="mt-2">Input Info 3</div>
    <!-- 当Input2未选中时禁用，选中后自动启用 -->
    <b-form-select v-model="id.input3" :options="filteredJSON3" :disabled="!id.Input2"></b-form-select>
  </div>
</div>

补充说明 #

• 如果你的id.Input1初始值是null、''或者undefined，:disabled="!id.Input1"的逻辑完全适用。
• 要是你的下拉框选项值有特殊情况（比如允许选中0这类 falsy 值），可以调整判断条件，比如改成:disabled="id.Input1 === null"，根据实际业务场景灵活调整就行。

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