Vue.js中如何实现bootstrap-vue select下拉框联动，选中一个后自动设置另一个值并禁用？

问题根因 #

• 直接修改prop警告：你应该是直接将父组件传入的value prop绑定到了<b-select>的v-model上，v-model双向绑定会直接修改prop值，违反了Vue单向数据流规范，所以触发警告。
• 禁用状态下赋值失效：当<b-select>被设为disabled时，如果你在子组件内部直接修改组件实例属性/未修改响应式的绑定源，bootstrap-vue的内部状态更新会优先于手动赋值，导致赋值不生效。

解决方案 #

1. 遵循单向数据流规范，解决prop修改警告 #

所有下拉框状态统一在父组件维护，子组件仅通过v-model的语法糖（接收value prop + 触发input事件）和父组件通信，不要在子组件内部直接修改prop：
如果是封装的下拉面子组件，可以用计算属性的get/set做中转：

// 子组件 computed 配置
computed: {
  innerValue: {
    get() { return this.value },
    set(newVal) { this.$emit('input', newVal) }
  }
}

模板中<b-select v-model="innerValue"></b-select>即可，不会再触发prop修改警告。

2. 联动逻辑放在父组件实现，解决禁用状态赋值失效 #

父组件统一维护两个下拉框的绑定值、禁用状态，监听第一个下拉框的值变化，直接修改第二个下拉框的绑定源值：

完整核心实现代码

<template>
  <div class="select-group">
    <!-- 付款类型下拉框 -->
    <b-select
      v-model="payType"
      :options="payTypeOpts"
      label="付款类型"
    ></b-select>
    <!-- 生效时间下拉框 -->
    <b-select
      v-model="effectTime"
      :options="effectTimeOpts"
      label="生效时间"
      :disabled="payType === 'subscription'"
    ></b-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 第一个下拉框绑定值
      payType: 'one_time',
      // 第二个下拉框绑定值
      effectTime: 'held',
      // 选项配置
      payTypeOpts: [
        { value: 'one_time', text: 'one time payment（单次付款）' },
        { value: 'subscription', text: 'subscription（订阅）' }
      ],
      effectTimeOpts: [
        { value: 'held', text: 'held（延后）' },
        { value: 'Immediate', text: 'Immediate（立即）' }
      ]
    }
  },
  watch: {
    // 监听付款类型变化，自动修改生效时间
    payType(newVal) {
      if (newVal === 'subscription') {
        this.effectTime = 'Immediate'
      }
    }
  }
}
</script>

方案优势 #

• 完全符合Vue单向数据流要求，不会再出现prop修改警告
• 第二个下拉框的赋值直接修改响应式绑定源，不管是否处于禁用状态都能正常更新显示
• 所有状态逻辑收敛在父组件，后续调整需求（比如新增其他联动规则）更易维护

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