以前の記事 [Vue.js, JavaScript]クリックされた要素を特定してdata属性から情報を取得する方法 で
v-chip という、
v-btn よりも小さいサイズの、「ユーザーが押せる要素」を例にして、記事を書きました。
今回は、この v-chip というコンポーネントについて、書いていきます。

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

そもそも chip とはどんなコンポーネントなのか

chip、聞きなれない名前ですが、どんなコンポーネントの事なんでしょう。
それに対する答えは以下です。
Chips – Material Design
Vuetify は Material Design を忠実に Vue.js 上で再現しているUIフレームワークですので、
当然、各UIパーツの概念は Material Design 公式内に存在しているわけです。
この Chip、というUIパーツについても同様に、リンク先のように、公式に概念の解説が存在します。

上記の公式解説によると、chip というUIパーツは
・Input Chips (入力チップ)
・Choice Chips (選択チップ)
・Filter Chips (フィルターチップ)
・Action Chips (アクションチップ)
↑これら4つの用途で使用されることを想定されている、と書かれています。

ボタンよりもコンパクトなサイズで使用できるので、ほかのUIパーツ内に置いて
情報を選んでもらったり、
表示する情報を絞り込んでもらったり、

といった使い方ができそうですね。

v-chip を呼び出す基本コード

<template>
  <v-chip>
    Like it !
  </v-chip>
</template>

↑Vuetify に定義されている v-chip コンポーネントを呼び出す基本形は、この様な形になります。
こちらのデフォルトの状態で、

<span class="v-chip v-size--default">
  <span class="v-chip__content">
    Like it !
  </span>
</span>

↑このように、spanタグが2重になった形で、chipが展開されます。

もちろん他のコンポーネント同様、v-chip にも
prop に値を渡す（設定する）ことで、
さまざまなカスタマイズをして使う事ができます。次のセクションで、それについて書いていきます。

いろいろな Chip を試してみる( v-chip がもつ props を試してみる)

では、 v-chip に指定できる、 prop についていくつか見てみたいと思います。

色を変える

<template>
  <v-chip color="indigo" dark>Like it !</v-chip>
</template>

↑color という prop を指定すると、Chipの色が変更できます。
他のコンポーネントと同じく、
指定できる色は、Material Color の色名指定、および css で指定可能な色が使えます。

アイコン付きのチップにする

<template>
  <v-chip color="indigo" dark>
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑このように、v-icon を 内包することで、アイコン付きのチップをつくることができます。
上記の例では、 Material Desing Icons を使用してアイコンボタンをつくっています。
Material Desing Icons は、
Vuetify公式 にも書かれていますが
次のリンク先を読み込むことで使用することができます。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

閉じること（非表示）ができるようにする

<template>
  <v-chip color="indigo" dark close v-if="isClose" @click="isClose = false">
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑close という prop を指定すると、チップを閉じる(非表示にする)ことができます。
この機能をつける際には、開閉情報を持たせておく data (上記の例では isClose という名前。名前はなんでも良いです)も
一緒に v-model で渡してあげる必要があります。
上記の例のように、単純に表示/非表示の場合は v-if で紐づけても、もちろん成立します。

これは、どんな時に使えるかというと、
たとえば、膨大な情報を持つコンテンツがあったとします。

その中からある特定のカテゴリの情報をユーザーが探す時、
セレクトボックスなどのUIパーツを選択して、表示したいカテゴリを選択するとします。
画面上は、選択されるごとに、選択されたカテゴリの子カテゴリがチップとして並ぶとします。

そのようなUIがあった時、ユーザーが特定の子カテゴリだけの情報を見たい場合は、
表示されているチップを閉じることで
その選択を解除することができる。

そんな場合にも（情報の絞り込み表示の際などに）、この v-chip は有効活用できそうですね。

アウトラインスタイル

<template>
  <v-chip color="indigo" dark outlined>
    <v-icon>mdi-emoticon-excited-outline</v-icon>
    Like it !
  </v-chip>
</template>

↑v-btnなどと同様に、outlined という prop を指定すると、外枠線のみを持ったシンプルなデザインに変更できます。