如何检测b-form-select是否有选中值以控制按钮的启用状态

首先你现有模板中b-form-select同时绑定v-model和:value属于冗余配置，v-model本身已经实现了值的双向绑定，无需额外声明:value，可先优化模板代码：

<b-form-select v-model="data.Name"></b-form-select>
<b-button :disabled="!validDataAdded"></b-button>

b-form-select的v-model绑定值会实时响应下拉选项的选择变化，你只需要在计算属性validDataAdded中按照你的业务规则判断绑定值是否为有效值即可，常见的判断写法参考如下：

computed: {
  validDataAdded: function(){
    // 写法1：常规非空校验，排除空字符串、null、undefined、0等假值
    return !!this.data?.Name
    
    // 写法2：如果0属于你的业务有效值，仅排除空字符串、null、undefined即可
    // return this.data?.Name !== null && this.data?.Name !== undefined && this.data?.Name !== ''
    
    // 写法3：如果你的可选值是固定枚举，可判断值是否在有效值列表中
    // const validValues = ['option1', 'option2', 'option3']
    // return validValues.includes(this.data?.Name)
  },
}

计算属性会自动监听依赖的data.Name变化，选择有效值后会自动将validDataAdded变为true，按钮的禁用状态就会自动更新。

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