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

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

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

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

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

てりーのこれまで

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

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

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

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

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

画像

note(ノート)

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

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 }, ], }; },

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

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が作れる反面、細かい挙動の制御が難しいパターンが多いので、詰まった部分が出てきたらまた、本ブログにまとめていきます。

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

関連記事

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

それでは。