[解決済み] オブジェクトのリストからオブジェクトを選択するBootstrap vue b-form-select

質問内容

問題の解答は得られたのですが、その解答の仕方に少し不満があります。もっとシンプルにする方法はないでしょうか？理想を言えば、同じような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
        }));
    });

解決方法は？

オブジェクト全体をバインドして value の <option> タグを使用します。そのため、代わりに options を手動で作成することになります。 <option> を使用しています。 v-for ディレクティブを使用します。

そうすると、オブジェクト全体が <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>