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

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。

関連記事

【2024年】未経験から即戦力へ！React+TypeScriptの学習ロードマップ

こんにちは、フロントエンドエンジニアのてりーです。 僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。 ノウハウがたまってきたので、React + TypeScriptの勉強[…]

では、どうぞ！

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系メガベンチャーのフロントエンドエンジニア転職した方法を振り返る

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

それでは。