Bootstrap-vue动态生成的b-form-select如何设置默认选中选项

解决方案 #

因为BootstrapVue的b-form-select依赖v-model做双向绑定，原生的selected属性会被v-model的绑定值覆盖，所以单独给选项加selected不会生效，你只需要在动态新增skill的时候，给v-model绑定的对应字段初始化值为'set'即可，具体实现如下：

1. 修改addSkill方法，在新增skill到store的skillsList之后，同步给绑定的skillArray.skillType对象添加对应skill ID的默认值，Vue2场景需要用$set保证响应式：

// addSkill方法修改示例
addSkill(event) {
  // 保留你原有新增skill到store的逻辑，示例：
  const newSkill = {
    ID: Date.now(), // 替换为你自己的唯一ID生成逻辑
    // 其他skill相关字段
  }
  this.$store.commit('addSkill', newSkill)

  // 核心逻辑：初始化对应下拉框的默认值为'set'
  this.$set(this.skillArray.skillType, newSkill.ID, 'set')
}

2. 确保组件内的skillArray提前初始化，可选补充：如果需要给已经存在的旧skill也设置默认值，可以在mounted钩子批量赋值：

export default {
  data() {
    return {
      skillArray: {
        skillType: {} // 提前初始化空对象
      }
    }
  },
  mounted() {
    // 给已有的历史skill批量设置默认值
    this.$store.state.skillsList.forEach(skill => {
      this.$set(this.skillArray.skillType, skill.ID, 'set')
    })
  }
}

如果是Vue3场景，不需要使用$set，直接赋值this.skillArray.skillType[newSkill.ID] = 'set'即可，Vue3的Proxy响应式系统原生支持监听对象新增属性。

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