【Vuetify】v-selectでオブジェクトを取得する

2021年7月7日
2024年8月20日
その他

その他

v-selectでオブジェクトを扱う方法

こんにちは、フロントエンドエンジニアのてりーです。
僕がエンジニアを始めて5年ぐらい経過しました。

大学中退してニートの時期にプログラミングを始めて、ReactとTypeScriptの分野に集中する事で、派遣→フリーランス→メガベンチャーとキャリアを模索してきました。

詳細を書くと長くなるので、気になる方は以下の記事をご覧ください。

てりーのこれまで

完全未経験からフリーランスエンジニアになり、メガベンチャーに転職した「てりー」のこれまで

プロフィールはじめまして、Webエンジニアの「てりー」です。プロフィールを読んでいただいて、ありがとうございます。現在はメガベンチャー企業でエンジニアとしてフルリモートで働きながら、スキマ時間で副業をしています。この[…]

フリーランスからメガベンチャーへ

【実体験】未経験からWeb系メガベンチャーのフロントエンドエンジニア転職した方法を振り返る

こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちら今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。・完全未経験から将来的なメガベンチャー転[…]

最近、React+TypeScriptの教材を作りました！！

2024年4月にnoteで一番読まれた記事なったほど反響があったので、興味ある方は是非ご覧下さい！

note（ノート）

【React+TypeScript】Netflixのクローンを作るチュートリアルはじめに｜てりー

こんにちは、フロントエンドエンジニアのてりーです。記事を手に取って頂きありがとうございます。このチュートリアルでは…

1 v-selectで親にオブジェクトごと渡したい
2 選択時のvalueはオブジェクトでは帰ってこない
3 対処法
4 まとめ

v-selectで親にオブジェクトごと渡したい

vuetifyでよく使うv-selectタグ。
先日、これで要素を選択した時に$emitで親にオブジェクトで値を渡したいと思う事がありました。
（nameとIdの両方を送りたい！とかそんな感じです。）

「そんなの簡単じゃん！」と思うかもしれませんが、意外と苦労したのでその経緯と対処法をまとめます。

ちなみに結論となる解決法は、return-objectを使うというシンプルなものです！

選択時のvalueはオブジェクトでは帰ってこない

v-selectの初期設定として選択時のvalueはオブジェクトを返しません。

具体例を見てみましょう。
v-selectで好きなお菓子の名前とIdを受け取るセレクトボックスです。

<template>
   <v-app id="app"> 値： {{ selectedSweet }}
       <v-select
         v-model="selectedSweet"
        item-text="label"
        item-value="value"
        items="sweets"
        label="好きなお菓子"
      />
   </v-app>
</template>

ちなみにitem-textとitem-valueを設定する事で、[object, object]と出力されず、labelとsweetIdを出し分け出来ます。

データ定義

data() { return { selectedSweet: { label: "チョコ", sweetsId: 1 }, //初期値 sweets: [ { label: "チョコ", sweetsId: 1 }, { label: "バナナ", sweetsId: 2 }, { label: "グミ", sweetsId: 3 }, ], }; },

初期値ではオブジェクトの値が取れています。

しかし選択肢を選ぶと…

値にはlabelだけが入ってしまいます。

対処法

簡単です。<strong>return-object</strong>を使いましょう。

return-objectはv-selectのpropsで、valueに帰ってくる値がオブジェクトになります。

vuetifyのドキュメント：https://vuetifyjs.com/ja/api/v-select/

先程のv-selectにreturn-objectを入れて

<v-select v-model="selectedSweet" item-text="label" item-value="value" :items="sweets" label="好きなお菓子" return-object />

選択後もちゃんとオブジェクトが取れるようになりました。

まとめ

結論からいうとv-selectはreturn-objectを使う事で、オブジェクトで値を扱える事がわかりました。

v-selectに関わらずvuetifyはラクにUIが作れる反面、細かい挙動の制御が難しいパターンが多いので、詰まった部分が出てきたらまた、本ブログにまとめていきます。

フロントエンドでキャリアアップを考えているなら

【実体験】未経験からWeb系メガベンチャーのフロントエンドエンジニア転職した方法を振り返る

それでは。