なにこれ 最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。 とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。 ただSelectタグでlabelとvalueを出しわける際に初期値を設定する場合は少しだけ注意点があるので、この記事ではそちらを紹介します。 return-objectを使いましょう Selectタグでlabelとvalueを出しわけるときに初期値を設定する場合、v-modelで設定します。 以下のような実装です。 <template> <div> {{ selectedPlan }} <v-select v-model="selectedPlan" item-text="label" item-value="value" :items="plans" la
![VuetifyでSelectタグを使う時の注意点 | Takumon Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/84fa409b8c4301307d7e295c23389e65f7d82d67/height=288;version=1;width=512/https%3A%2F%2Ftakumon.com%2Fstatic%2Ff0e40a414875c5bcde470af99a8bac40%2F2d11e%2Fvuetify-select-tag.png)