Bootstrap Vue中b-form-select直接绑定对象数组的简化方案问询

你只需要调整<b-form-select>的两个字段属性配置，就可以完全去掉数组遍历构造对象的逻辑，直接将接口返回的教师数组赋值使用，具体修改如下：

修改后HTML代码 #

<b-form-select 
    v-model="selectedTeacher"
    :options="teachers"
    :value-field="null"
    text-field="name">
</b-form-select>

配置说明 #

• 将value-field绑定为null，BootstrapVue就会直接把整个选项对象作为选中值返回，不需要你额外嵌套一层teacher字段，完全符合你想要保留整个教师对象作为选中值的需求
• 接口返回的Teacher类型本身自带name属性，直接将text-field设为name即可读取显示文本，不用额外构造name字段

修改后JS代码 #

this.teachers = await getTeachers()

不需要任何遍历、额外构造对象的操作，直接赋值即可正常使用。

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