基本のコードをご紹介

こちらのコードは、Vuetify の v-select というコンポーネントを呼び出す基本形のコードです。

<template>
  <v-select
    v-bind:items="selections"
    label="simply selection"
  ></v-select>
</template>

↑いつもどおり、基本形はとってもシンプルで使いやすそうですね。

解説など

では、内容について詳しく見ていきましょう。
上記の通り、基本形としてはたったの4行で表示可能です。
（※各種 props ごとに行を分けているので4行ですが、実際は1行で書けます。他のVuetifyのコンポーネントについてもそうなのですが、 これはコンポーネントを呼び出しているタグなので <v-select /> のように、/ を付けることで閉じタグの省略記法を使うこともできます）

上のコードの
3行目にある通り、items という props に data を v-bind することで、その data が選択項目となります。
4行目の label は、文字通りセレクトボックス上に初期表示される文字が入ります。

dataは、こんな感じで用意しておきます。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    selections: [
    'Vue.js',
    'WordPress',
    'Vuetify',
    'Swiper',
    'Ionic'
    ],
  }
});
</script>

実際に動くサンプル

今回も、実際に動くサンプルが作成してあります。
次のリンクより、ご覧ください。
v-selectのサンプル_シンプルかつ綺麗なセレクトボックスを使ってみる

そのほかのオプション(props)など

このように、簡単に綺麗なセレクトボックスを使うことができる v-select ですが、上記の基本形のほかにも、
設定できる props がいろいろあります。まずは、簡単に見た目を変えられるオプションを3つほどご紹介します。

外枠付きのスタイルに変える

<template>
  <v-select
    v-bind:items="selections"
    label="outlined selection"
    outlined
  ></v-select>
</template>

↑outlined という props を指定すると、角丸+アウトラインを持ったスタイルに変わります。

単一のUIとして使う仕様のスタイルに変える

<template>
  <v-select
    v-bind:items="selections"
    label="solo selection"
    solo
  ></v-select>
</template>

↑solo という props を指定すると、elevationを持ったスタイルに変わります。
これは、マテリアルデザインにおける
単一の目的としてテキストフィールド等が使用される場合のスタイルで、
詳しくは
Material Design 公式の　Field variations — Solo fields の項を参照すると、どういう意図のスタイルかよくわかる事と思います。

塗りを持ったスタイルに変える

<template>
  <v-select
    v-bind:items="selections"
    label="filled selection"
    filled
  ></v-select>
</template>

↑filled という props を指定すると、塗りを持ったスタイルに変わります。

表示される見た目上のテキストと、選択された値をわけるセレクトボックス

UI上はわかりやすい日本語の文言を表示して、
実際は data として値を使いたいので、別のvalueを渡したい。
そんな場合には、この props が使えます。
（というか、おそらく実際の制作では、このパターンが最も多く使われる事になるのではないでしょうか。）
コードはこちらです。

<template>
  <v-select
    :items="hasValueAndLabels"
    item-text="showLabel"
    item-value="selectedValue"
    v-model="selectedItem"
    return-object
    label="項目を選択">
  </v-select>
</template>

↑この props についての解説です。
4行目の item-text に渡している data がUI上に表示されるテキストになります。
5行目の item-value に渡している data が、選択された際に渡る値（value）になります。
6行目の v-model に渡している data が、選択された内容が都度更新される部分です。
7行目の return-object という props を指定する事で、この「表示される見た目上のテキストと、選択された値をわける」状態が有効になります。
8行目の label は、文字通りラベルです。

dataは、例えば以下のように用意しておきます。
ちなみに hasValueAndLabel やら selectedItem やら長いdata名がついていますが、これは何でも良いです。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    selectedItem: {
      selectedValue: 'uiframework', showLabel: 'Vuetify'
    },
    hasValueAndLabels: [
      { selectedValue: 'vuejs', showLabel: 'Vue.js' },
      { selectedValue: 'wp', showLabel: 'WordPress' },
      { selectedValue: 'uiframework', showLabel: 'Vuetify'},
    ],
  }
});
</script>

props を加えたサンプル

各種 props を加えたサンプルも、先ほどの基本形の下に並べて作成してあります。
次のリンクより、ご覧ください。
v-selectのサンプル_シンプルかつ綺麗なセレクトボックスを使ってみる

公式ドキュメント、APIページについて

v-select コンポーネントの Vuetify公式ページは以下です。

セレクト・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる各種 props の一覧が記載されています。
v-select API — Vuetify

この記事のまとめ

今回は、Vuetify の数々のUIコンポーネントの中から、
綺麗なセレクトボックスを実装することができる v-select についてご紹介しました。

綺麗なUIパーツを実際に表示させながら
マテリアルデザインの概念にも触れることができるVuetify、
やはりとても優れたUIフレームワークだと感じています。

「ユーザーが操作して得られる機能や目的がその先にあるからこそ、
UIパーツというものは必要になる」
という大前提を、機能面を含めて理解する意味でも
デザイナーの方にもぜひ触れてみてほしいフレームワークかな、と個人的には感じています。

（これは何も、Webデザインに限った話じゃなく、身近な例では
エレベーターのボタンだって立派なUIパーツですし、
コーヒーマシンのボタンだってUIパーツが並んでますよね。
前者は「昇降して移動する」という目的があり、
後者は「コーヒーを淹れる」という目的があり、
それが言わば、UIを操作した結果、到達できるUXというわけですよね。
目的に快適に到達できれば、良い体験をユーザーにしてもらえる、ということですよね。）

…私自身も、もっともっと、より良い体験をユーザーの方にしてもらえるよう、日々進んで行こうと思っています。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。