[Vue.js]Vuetifyで綺麗なセレクトボックスを簡単に実装する方法[v-select]

Vuetifyの記事_v-selectについて

Vuetify でセレクトボックスを簡単に使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事の、13回目になります。
今回は、マテリアルデザインに沿った仕様のセレクトボックスを簡単に実装することができる
v-select というコンポーネントについて、書いていきます。

↑こんな感じの、セレクトボックスを表示してみます。サンプルでは、UI操作により、フロント側でdataが更新されていることがわかるかと思います。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

基本のコードをご紹介

<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 に関する記事を掲載していく予定です。

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