Bootstrap vue 从对象列表中选择对象 b-form-select

Question

尽管我得到了问题的解决方案，但我对其解决方式有点不满意。有没有办法让这件事变得更简单？比如，理想情况下我会有类似的 html，我唯一要做的就是调用 api 来获取教师并立即将它们分配给他们，this.teachers而不必遍历它们来创建一些新对象的无类型数组。

HTML：

    <b-form-select 
        v-model="selectedTeacher"
        :options="teachers"
        value-field="teacher" //NOT teacher.id, I want the object itself
        text-field="teacher.name">
    </b-form-select>

JS

    var dbTeachers: Teacher[] = await getTeachers();
    
    dbTeachers.forEach(teacher => {
        this.teachers.push(new Object({
            teacher: teacher ,
            name: teacher.name
        }));
    });

Answer 1

您可以将整个对象绑定到value标签的<option>。因此，options 您可以手动创建<option>usingv-for指令，而不是使用 prop。

这样你就可以得到 的<b-form-select>v 模型中的整个对象。

new Vue({
  el: "#app",
  data() {
    return {
      selectedItem: null,
      options: [
        { id: 1, name: 'Mike Macdonald', age: 42 },
        { id: 2, name: 'Larsen Shaw', age: 27 },
        { id: 3, name: 'Jami Cord', age: 81 },
      ],
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-form-select v-model="selectedItem">
    <option :value="null" disabled>-- Please select an option --</option>
    <option v-for="option in options" :value="option">
      {{ option.name }}
    </option>
  </b-form-select>
  Selected option: {{ selectedItem }}
</div>