[解決済み] オブジェクトのリストからオブジェクトを選択するBootstrap vue b-form-select
2022-02-12 11:35:01
質問内容
問題の解答は得られたのですが、その解答の仕方に少し不満があります。もっとシンプルにする方法はないでしょうか?理想を言えば、同じような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>
関連
-
[解決済み] Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか?
-
[解決済み] Vue.jsで12件中1~3件を表示させるには?
-
_this.axios is not a functionの原因と解決方法
-
vue リクエストエラー Uncaught (プロミス内)
-
Vue.js学习的第一天
-
[解決済み] Nuxt.jsで "window is not defined "と表示される。
-
[解決済み] vuepress2: Vueインスタンスを取得し、サードパーティのVueプラグインを使用できるようにするには?
-
[解決済み] Vue.jsでグローバルフィルタを大量に追加する方法は?
-
vue springboot reports error DOMException: XMLHttpRequest'の'send'の実行に失敗しました。ロードに失敗しました
-
[解決済み】TypeError: this.getOptions は関数ではありません。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] オブジェクトのリストからオブジェクトを選択するBootstrap vue b-form-select
-
[解決済み] Vue 2.0でコンポーネント自身を削除する方法
-
[解決済み] プロジェクトのvue.jsのバージョンを確認する方法は?
-
フロントエンドインタビューの質問まとめ
-
vue3 が axios エラーを導入する 未定義または null をオブジェクトに変換できない
-
vue springboot reports error DOMException: XMLHttpRequest'の'send'の実行に失敗しました。ロードに失敗しました
-
[解決済み】TypeError: this.getOptions は関数ではありません。
-
[解決済み】他のアクションの中からアクションを呼び出す
-
[解決済み】Vue.jsの別ページへのリダイレクトについて
-
[解決済み】Vuex - ミューテーションに複数のパラメータを渡す