入力されたIDでモデルの配列より検索したい時。WHERE句的な。TSでやってみる。こんな感じの野菜クラスがある。
export class Vegetable {
id: number
name: string
value: number
productionArea: string
unit: string
constructor (data: any) {
this.id = Number(data.id)
this.name = i18n.locale === 'ja' ? data.name_ja : data.name_en || ''
this.value = data.value
this.unit = i18n.locale === 'ja' ? data.unit_ja : data.unit_en || ''
}
}
こんな感じの選択式だとする。(Vue2)
<td>
<b-field>
<b-select v-model="form.type">
<option :value="null"></option>
<option
v-for="vegetable in vegetables"
:key="vegetable.id"
:value="vegetable.id"
>
{{ vegetable.name }}
</option>
</b-select>
</b-field>
</td>
// 選択されたものを他で使いたい。
computed: {
selectedVegetablel(): Vegetable | null {
return this.Vegetables.find((v) => v.id === this.form.type) || null
},
選択されたIDでVegetablesのidを突合してモデルオブジェクトを返す感じ。他のcomputedで名前とか使える。かも。
コメント