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

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

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

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

関連記事

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。すでにReact+Ty[…]

では、どうぞ!

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

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

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

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

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

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

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

<template><v-app id="app"> 値: {{ selectedSweet }} <v-selectv-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 }, ], }; },

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

Image from Gyazo

しかし選択肢を選ぶと…

Image from Gyazo

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

対処法

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

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

Image from Gyazo

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 />

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

Image from Gyazo

まとめ

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

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

もし現状の仕事に不満があるなら

転職ドラフトに登録して見てはいかがでしょうか?
実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります!!

関連記事

「転職ドラフトはハイスペックなエンジニア向けだけ?」と思っていませんか?実は、技術力に自信がない、あるいは業界経験が浅いエンジニアこそ、転職ドラフトを使うべきなんです。そういったエンジニアの多くは転職ドラフトに登録する際、レジュ[…]

それでは。