・v-select使用時によくある絵と解決策
こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！
👉 本記事ではv-selectの使い方に焦点を当てて解説します！
v-selectとは？
Vuetifyのv-selectは、リストから項目を選択するための強力なコンポーネントです。
シンプルなセレクトボックスから複雑なカスタマイズまで対応できるため、多くのVue.jsプロジェクトで活用されています。
v-selectの基本構造
<v-select
v-model="selectedItem"
:items="items"
item-text="name"
item-value="id"
label="選択してください"
/>
・item-text: 表示するテキスト
・item-value: 選択時に取得する値
しかし、このままではオブジェクト全体を選択結果として取得することはできません。
v-selectでオブジェクトを渡すには？
「v-selectで選択したアイテムのidだけでなく、nameも含むオブジェクト全体を取得したい！」
この場合、return-object を使うことで解決できます。
return-objectの役割
return-objectを指定すると、選択した項目がオブジェクトのまま返されます。
以下、ドキュメントの記述。
サンプルコード
<v-select
v-model="selectedSweet"
:items="sweets"
item-text="label"
item-value="sweetsId"
return-object
label="好きなお菓子"
/>データベースやAPIから取得したデータをそのまま扱えるので、後続処理がスムーズになります。
コードサンプルで解説
以下は、v-selectでお菓子の情報を選択する例です。
<template>
<v-app>
<div>
<p>選択したお菓子: {{ selectedSweet }}</p>
<v-select
v-model="selectedSweet"
:items="sweets"
item-text="label"
item-value="sweetsId"
return-object
label="好きなお菓子"
/>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
selectedSweet: null,
sweets: [
{ label: "チョコ", sweetsId: 1 },
{ label: "バナナ", sweetsId: 2 },
{ label: "グミ", sweetsId: 3 }
]
};
}
};
</script>
選択前: selectedSweetはnull<br />選択後: selectedSweetにはオブジェクトが格納されます！
{ "label": "チョコ", "sweetsId": 1 }よくあるエラーと解決策
v-selectを使用していると、以下のようなエラーや挙動に悩むことがあります。
それぞれの原因と解決策を解説します。
エラー1: オブジェクトではなく、IDだけが返ってしまう
現象
・v-modelにバインドされた値が、オブジェクトではなくitem-valueのプロパティのみ返ってしまう
・selectedSweetに期待していた{ label: "チョコ", sweetsId: 1 }ではなく、1だけが格納される
原因
・return-objectが指定されていない
・デフォルトではitem-valueのプロパティのみがv-modelにバインドされる仕様
解決策
・return-objectを指定する
・selectedSweetがnullで初期化されているか確認
data() {
return {
selectedSweet: null
};
}エラー2: 選択後にデータが消える
現象
・v-selectで項目を選択しても、selectedSweetにデータが保持されない
・選択後、リストがリセットされてしまう
原因
・v-modelの初期値がnullではなく、異なるデータ型が設定されている
・return-objectを使用しているのに、オブジェクトを適切に扱えていない
解決策
・オブジェクトを扱う際は、return-objectが有効になっていることを確認
・selectedSweetの初期値を適切に設定
data() {
return {
selectedSweet: null,
sweets: [
{ label: "チョコ", sweetsId: 1 },
{ label: "バナナ", sweetsId: 2 }
]
};
}エラー3: カスタムオブジェクトでのバグ
現象
・v-selectのitemsでカスタムオブジェクトを使用すると、特定のプロパティが表示されない
原因
・item-textとitem-valueが正しく指定されていない
・オブジェクト内のプロパティ名が一致していない
解決策
・item-textとitem-valueを確認
<v-select
v-model="selectedSweet"
:items="sweets"
item-text="label"
item-value="sweetsId"
return-object
label="好きなお菓子"
/>return-objectを使うメリット
return-objectを使うことで、以下のようなメリットが得られます。
オブジェクトをそのまま操作できる
通常のv-selectではitem-valueの値しか取得できませんが、return-objectを指定することでオブジェクト全体が取得できます。
<v-select
v-model="selectedSweet"
:items="sweets"
item-text="label"
item-value="sweetsId"
return-object
label="お菓子"
@change="handleChange"
/>
---
methods: {
handleChange() {
console.log(this.selectedSweet);
// { label: "チョコ", sweetsId: 1 }
}
}フォーム送信が簡単になる
return-objectを使うことで、選択したデータをAPIやフォームにそのまま送信できます。
submitForm() {
axios.post('/api/sweets', this.selectedSweet);
}柔軟なデータ処理
APIレスポンスやデータベースとの連携時に、オブジェクト全体が返ってくることでデータ処理が簡単になります。
具体例
・複数のプロパティを含むオブジェクトを一括で渡せる
・UI上で複数のデータを同時に表示できる
VuexやPiniaとの連携
return-objectで取得したオブジェクトをVuexやPiniaに格納し、グローバルステートとして管理すると、より複雑なアプリケーション構築が可能です。
VuexもPiniaもVue3にて公式に推奨されている状態管理ライブラリです！
連携のサンプルコード
store.commit('setSelectedSweet', this.selectedSweet);型安全性
TypeScriptを使っている場合、v-selectのselectedSweetに型定義を追加すると、エラーの発生を防げます。
interface Sweet {
label: string;
sweetsId: number;
}
selectedSweet: Sweet | null = null;まとめ
この記事ではVuetifyのv-selectでオブジェクトを扱う方法を解説していきました！
return-objectを使えば、オブジェクト全体が返ってくる・エラーが発生した場合は、初期値やプロパティの指定を確認
・API連携やフォーム送信、Vuexとの統合も簡単になる
次はエンジニアとしてのキャリアアップを目指しませんか？
👉 未経験の僕がメガベンチャーエンジニアになった軌跡
👉 エンジニア転職で年収アップを実現
人気記事
👉【2024年】未経験から即戦力へ！React+TypeScriptの学習ロードマップ
👉【転職ドラフト指名の画像アリ】2年目で600万の指名を獲得した僕が考える技術自信ナシでも転職ドラフトを使った方が良い理由
👉フルリモート週2~3日からでも副業が出来るエージェント紹介