Vuetify.js 2.2のChipコンポーネントについて

# 概要

Chipコンポーネントの初歩的な使い方のまとめです。

**環境**

* Windows 10 Professional 1909
* Node.js 12.14.1
* Vue.js 2.6.11
* Vuetify.js 2.2.8 (投稿時は2.2.6)

**参考**

* [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
* [Components] (https://vuetifyjs.com/en/components/api-explorer)
* [Styles - Colors] (https://vuetifyjs.com/en/styles/colors)
* [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)

# [Chips] (https://vuetifyjs.com/en/components/chips)

## Props

### VChip

* [VChip] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VChip/VChip.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/colorable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/themeable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/toggleable/index.ts)
* [Routable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/routable/index.ts)
* [Sizeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/sizeable/index.ts)

```text
VChip ---- Colorable
      `--- Groupable
      `--- Themeable
      `--- Toggleable
      `--- Routable
      `--- Sizeable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VChip**      |active         |boolean          |true      |                            |true |
|               |*active-class* |string           |          |                            | |
|               |close          |boolean          |false     |                            | |
|               |close-icon     |string           |'$delete' |                            |'$delete' |
|               |disabled       |boolean          |false     |                            | |
|               |draggable      |boolean          |false     |                            | |
|               |filter         |boolean          |false     |                            | |
|               |filter-icon    |string           |'$complete'|filter                     |'$complete' |
|               |label          |boolean          |false     |                            | |
|               |*link*         |boolean          |false     |                            | |
|               |outlined       |boolean          |false     |                            | |
|               |pill           |boolean          |false     |v-avatar                    | |
|               |*tag*          |string           |'span'    |                            |'span' |
|               |text-color     |string           |undefined |                            | |
|               |value          |any              |undefined |v-chip-group                | |
|Colorable      |color          |string           |undefined |                            | |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |
|Toggleable     |input-value    |any              |undefined |                            | |
|Routable       |active-class   |string           |-         |                            | |
|               |append         |boolean          |false     |                            | |
|               |exact          |boolean          |false     |                            |undefined |
|               |exact-active-class|string        |undefined |                            | |
|               |link           |boolean          |-         |href,to                     | |
|               |href           |string or object |undefined |link                        | |
|               |to             |string or object |undefined |link                        | |
|               |nuxt           |boolean          |false     |nuxt-link                   | |
|               |replace        |boolean          |false     |                            | |
|               |ripple         |boolean or object|undefined |v-ripple directive.         |null |
|               |tag            |string           |-         |                            | |
|               |target         |string           |undefined |href                        | |
|Sizeable       |large          |boolean          |false     |                            | |
|               |small          |boolean          |false     |                            | |
|               |x-large        |boolean          |false     |                            | |
|               |x-small        |boolean          |false     |                            | |

* input-value : アイテムのアクティブ状態を制御します。 これは通常、コンポーネントを強調表示するために使用されます。
* value : v-chip-groupの子の場合に使用される値。

## 実装例

### テーマ

**dark**

ダークテーマの各チップ形状の一覧です。2段目は同一形状に対して`disabled`プロパティを指定した無効化されたチップです。

```vue
<v-chip dark>default</v-chip>
<v-chip dark>
    <v-icon left>mdi-vuetify</v-icon>
    icon + default
</v-chip>
<v-chip dark label>label</v-chip>
<v-chip dark label>
    <v-icon left>mdi-vuetify</v-icon>
    icon + label
</v-chip>
<v-chip dark outlined>outlined</v-chip>
<v-chip dark outlined>
    <v-icon left>mdi-vuetify</v-icon>
    icon + outlined
</v-chip>
<v-chip dark filter :input-value="true">filter</v-chip>
<v-chip dark close>close</v-chip>
<v-chip dark close>
    <v-icon left>mdi-vuetify</v-icon>
    icon + close
</v-chip>
```

![chip-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/19e852c3-8d7d-b77c-d28a-b3606a4b8de6.png)

**light**

ライトテーマの各チップ形状の一覧です。`light`プロパティ以外のソースコードはダークテーマと同一です。
![chip-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/dc8bb992-2181-cb83-1777-d4165282510f.png)

### カラー

カラーの指定では、チップ自体の色を指定する`color`プロパティとテキストの色を指定する`text-color`プロパティがあります。

```vue
<v-chip color="red" text-color="white">red</v-chip>
```

![chip-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1f5ab04d-0e52-4f60-1ae2-f621f4fee779.png)

### サイズ

サイズはデフォルトと`x-small`、`small`、`large`、`x-large`の5種類があります。右側の5つはスロットにアイコンを指定したチップの例です。この例ではチップとアイコンのサイズを同じプロパティで合わせていますが、別々のサイズを指定してもかまいません。

```vue
<v-chip x-small>x-small</v-chip>
<v-chip small>small</v-chip>
<v-chip>default</v-chip>
<v-chip large>large</v-chip>
<v-chip x-large>x-large</v-chip>
<v-chip pill x-small><v-icon left x-small>mdi-star</v-icon>x-small</v-chip>
<v-chip pill small><v-icon left small>mdi-star</v-icon>small</v-chip>
<v-chip pill><v-icon left>mdi-star</v-icon>default</v-chip>
<v-chip pill large><v-icon left large>mdi-star</v-icon>large</v-chip>
<v-chip pill x-large><v-icon left x-large>mdi-star</v-icon>x-large</v-chip>
```

![chip-size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/88b54286-74e4-07d3-86f0-9b7e75080ba9.png)

### フィルター

`filter`プロパティを指定すると、`input-value`プロパティの値がtrueのときにフィルターアイコンが表示されるようになります。
下のGIFアニメーションのようにクリックするとフィルターアイコンが表示されるように実装することができます。
フィルターアイコンは`filter-icon`プロパティで任意のアイコンにすることもできます。

```vue
<v-chip
  filter
  :input-value="f1"
  :color="f1 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  @click="f1 = !f1"
  >filter</v-chip
>

<v-chip
  filter
  filter-icon="mdi-check-circle"
  :color="f2 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f2"
  @click="f2 = !f2"
  >filter</v-chip
>

<v-chip
  filter
  filter-icon="mdi-check-underline"
  :color="f3 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f3"
  @click="f3 = !f3"
  >filter</v-chip
>

<v-chip
  :color="f4 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f4"
  @click="f4 = !f4"
  v-text="f4 ? 'selected' : 'select'"
></v-chip>

<v-chip
  link
  filter
  :color="f5 ? 'indigo lighten-1' : 'blue lighten-2'"
  text-color="white"
  :input-value="f5"
  :label="!f5"
  :ripple="false"
  @click="f5 = !f5"
  >filter</v-chip
>
```

![chip-filter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/af8a2b34-89cc-dcf2-1c98-19b68e738fa3.gif)

### クローズ

`close`プロパティを指定するとチップにクローズアイコンが表示されます。ただしデフォルトではこのクローズアイコンをクリックしても下のGIFアニメーションのようにチップは消えません。
チップを消すには`active`プロパティにfalseをセットする必要があるので、クローズアイコンをクリックすると発生する`update:active`イベントか、`click:close`イベントで`active`プロパティにfalseをセットするようにします。

```vue
<v-chip link close :active="c1" @update:active="c1 = $event">close</v-chip>
<v-chip link close close-icon="mdi-close" :active="c2" @update:active="c2 = $event">close</v-chip>
<v-chip link close close-icon="mdi-close-outline" :active="c3" @click:close="c3 = false">close</v-chip>
```

![chip-close.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/62c4851c-7034-68ef-b7e5-066d7b25ac8f.gif)

### アバター

チップとアバターを組み合わせた例です。チップに`pill`プロパティを指定するとアバターのパディングを除去します。
下記は`pill`プロパティの有無とアバターのスロットにv-iconコンポーネント、タグ、v-imgコンポーネントを使った組み合わせになります。

```vue
<v-chip pill color="cyan" text-color="white" @click="pa1 = !pa1">
    <v-avatar left>
        <v-icon v-if="pa1" color="white">mdi-email</v-icon>
        <v-icon v-else color="white">mdi-email-lock</v-icon>
    </v-avatar>
    icon + pill
</v-chip>
<v-chip color="cyan" text-color="white" @click="pa2 = !pa2">
    <v-avatar left>
        <v-icon v-if="pa2" color="white">mdi-email</v-icon>
        <v-icon v-else color="white">mdi-email-lock</v-icon>
    </v-avatar>
    icon + no pill
</v-chip>
<v-chip pill link color="light-green lighten-1" @click="counter = counter + 1">
    <v-avatar left>
        <span class="pa-3 green darken-4 white--text">{{ counter }}</span>
    </v-avatar>
    text
</v-chip>
<v-chip link color="light-green lighten-1" @click="counter = counter + 1">
    <v-avatar left>
        <span class="pa-3 green darken-4 white--text">{{ counter }}</span>
    </v-avatar>
    text + no pill
</v-chip>
<v-chip pill link>
    <v-avatar left>
        <v-img :src="require('@/assets/logo.png')" alt="vuetify"></v-img>
    </v-avatar>
    image
</v-chip>
<v-chip link>
    <v-avatar left>
        <v-img :src="require('@/assets/logo.png')" alt="vuetify"></v-img>
    </v-avatar>
    image + no pill
</v-chip>
```

![chip-pill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/80e414e4-b699-303b-dd3b-8bc2fef2e9f5.png)

### アイコン

チップとアイコンを組み合わせた例です。

```vue
<v-chip>
    <v-icon left>mdi-star</v-icon>
    mdi-star
</v-chip>
<v-chip>
    mdi-star
    <v-icon right>mdi-star</v-icon>
</v-chip>
<v-chip>
    <v-icon left>mdi-email</v-icon>
    mdi-email
</v-chip>
<v-chip>
    <v-icon left>mdi-cellphone-android</v-icon>
    mdi-cellphone-android
</v-chip>
```

![chip-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/51038c96-0b70-4b4a-188e-da1a18a6a233.png)

### リップル

`link`プロパティを指定すると、チップにマウスカーソルを合わせるとカーソルがポインターになり、クリックするとリップル（波紋）のエフェクトが発生します。
デフォルトではクリックした点を中心に波紋が広がるエフェクトですが、center=trueという指定にすると必ずチップの中心から波紋が広がります。またclassで波紋の色を指定することもできます。
`:ripple="false"`とするとリップルのエフェクトは発生しなくなります。

```vue
<v-chip>no link</v-chip>
<v-chip link>link + ripple</v-chip>
<v-chip link :ripple="{ center: true }">link + center=true</v-chip>
<v-chip link :ripple="false">link + ripple=false</v-chip>
```

左端の`link`プロパティが無いチップはマウスカーソルを合わせてもポインターにならず、クリックしてもリップルは発生しません。
![chip-ripple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/25df6485-54bb-435e-a91a-f977673f5eeb.gif)

### ページ遷移

チップをクリックしたときにページ遷移を行うには`to`、`nuxt`、`href`プロパティを使います。
vue-routerの場合は`to`、Nuxtの場合は`nuxt`、外部のページへ遷移する場合は`href`が使用できます。`href`では新しくタブを開きたい場合に`target`プロパティも使用できます。

```vue
<v-chip href="https://www.google.co.jp" target="_blank">HREF</v-chip>
<v-chip href="#top">#TOP</v-chip>
<v-chip :to="{ name: 'Home' }" active-class="blue" exact-active-class="cyan">to Home</v-chip>
<v-chip :to="{ name: 'Chip' }" active-class="blue" exact-active-class="cyan">to Chip</v-chip>
<v-chip :to="{ name: 'ChipGroup' }" active-class="blue" exact-active-class="cyan">to Chip Group</v-chip>
```

### アクティブ

クローズの箇所でも触れましたが`active`プロパティにfalseを指定するとチップが非表示になります。

```vue
<v-container>
    <v-row justify="start">
        <v-col cols="auto">
            <v-chip>ON</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac1" link @click="ac1 = !ac1" color="red">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac2" link @click="ac2 = !ac2" color="pink">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="ac3" link @click="ac3 = !ac3" color="purple">active</v-chip>
        </v-col>
    </v-row>
    <v-row justify="start">
        <v-col cols="auto">
            <v-chip>OFF</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac1" link @click="ac1 = !ac1" outlined color="red">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac2" link @click="ac2 = !ac2" outlined color="pink">active</v-chip>
        </v-col>
        <v-col cols="2">
            <v-chip :active="!ac3" link @click="ac3 = !ac3" outlined color="purple">active</v-chip>
        </v-col>
    </v-row>
</v-container>
```

![chip-active.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/a37553a0-f5f8-9098-77fd-88ca75713a79.gif)


## Events

**click**
チップがクリックされたときに発生します。.native修飾子が使用されていない限りクリックされるとリップルのエフェクトが発生します。

```vue
<v-chip @click="click">chip</v-chip>
```

メソッドの引数はMouseEventオブジェクトです。

```
methods: {
    click(e) {
      console.log('click:', e)
    }
}
```

**click:close**
closeアイコンがクリックされたときに生成されます。チップ自体のクリックには反応しません。

**update:active**
closeアイコンがクリックされたときに生成され、activeをfalseに設定します。

```vue
<v-chip close :active="active" @update:active="active = $event">chip</v-chip>
```

# [Chip groups] (https://vuetifyjs.com/en/components/chip-groups)

## Props

### VChipGroup

* [VChipGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VChipGroup/VChipGroup.ts)
* [VSlideGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts)
* [VItemGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/components/VItemGroup/VItemGroup.ts)
* [Proxyable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.8/packages/vuetify/src/mixins/proxyable/index.ts)

```text
VChipGroup ---- VSlideGroup ---- VItemGroup ---- Groupable
           |                                `--- Proxyable
           |                                `--- Themeable
           |
           `--- Colorable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VChipGroup** |column         |boolean          |false     |                            |  |
|**VSlideGroup**|*active-class* |string           |'v-slide-item--active' |               |'v-slide-item--active'  |
|               |center-active  |boolean          |false     |                            |  |
|               |next-icon      |string           |'$next'   |                            |'$next' |
|               |mobile-break-point|number or string|1264    |                            |1264  |
|               |prev-icon      |string           |'$prev'   |                            |'$prev' |
|               |show-arrows    |boolean          |false     |                            |  |
|**VItemGroup** |active-class   |string           |-         |                            |'v-item--active' |
|               |mandatory      |boolean          |false     |                            |  |
|               |max            |number or string |undefined |                            |null |
|               |multiple       |boolean          |false     |value                       |  |
|Proxyable      |value          |any              |undefined |                            |  |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |
|Colorable      |color          |string           |undefined |                            | |
|               |               |                 |          |                            |  |

* multiple : 複数選択を許可します。 value propは配列でなければなりません。
* value : コンポーネントの指定されたモデル値。

## 実装例

### テーマ

**dark**

ダークテーマのチップグループの表示です。左側(4つのチップ)のチップグループは表示領域に収まっていますが、右側(10このチップ)のチップグループは表示領域に収まらないため、右端にスクロール用の矢印アイコンが表示されています。これはデフォルトの動作ですが、`column`プロパティで折り返し表示することもできます。

```vue
<v-row justify="space-around">
    <v-col cols="12" md="5" class="my-2 grey darken-3">
        <v-subheader class="white--text">dark theme</v-subheader>
        <v-chip-group v-model="d1" dark>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd2</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd3</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd4</v-chip>
        </v-chip-group>
    </v-col>
    <v-col cols="12" md="7" class="my-2 grey darken-3">
        <v-subheader class="white--text">dark theme</v-subheader>
        <v-chip-group v-model="d1" dark>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd2</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd3</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>cmd4</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd5</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd6</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>cmd7</v-chip>
            <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>cmd8</v-chip>
            <v-chip pill><v-icon left>mdi-alpha-b-circle</v-icon>cmd9</v-chip>
            <v-chip pill><v-icon left>mdi-alpha-a-circle</v-icon>cmd10</v-chip>
        </v-chip-group>
    </v-col>
</v-row>
```

左端のチップがアクティブな状態です。
![chip-group-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/043a3b77-74e6-6959-6d4e-21875a5588bd.png)

**light**

ライトテーマのチップグループの表示です。内容はダークテーマと同様です。
![chip-group-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/5a9f7086-f7df-12f7-e7ab-8744bf9ebd1c.png)

### 矢印アイコン

デフォルトではスクロールできる方向に矢印アイコンが表示されますが、`show-arrows`プロパティを指定すると左右の矢印アイコンが必ず表示されます。

```vue
<v-subheader>show-arrows</v-subheader>
<v-chip-group show-arrows>
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>
```

![chip-group-show-arrows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1b6cd752-61d6-20b2-1c8b-aceb91382c59.png)

左右の矢印アイコンは`prev-icon`、`next-icon`プロパティで変更することができます。

```vue
<v-subheader>show-arrows + prev-icon, next-icon</v-subheader>
<v-chip-group show-arrows prev-icon="mdi-chevron-left-box-outline" next-icon="mdi-chevron-right-box-outline">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>
```

![chip-group-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8e6022b9-2972-1b09-1fe6-ff399f333ed2.png)

### 選択したチップのカラー

`active-class`プロパティで選択したチップのカラーを指定できます。

```vue
<v-subheader>active-class</v-subheader>
<v-chip-group active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>
```

![chip-group-active-class.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/1055f97c-c67a-cd88-308f-557531dbee15.png)

### 選択したチップを中央に表示

`center-active`プロパティを指定すると選択したチップが中央に表示されるように調整されます。

```vue
<v-subheader>center-active</v-subheader>
<v-chip-group center-active active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>
```

![chip-group-center-active.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/fa133eab-a8ab-c75d-5dc5-a9ab78a83591.gif)

### カラム

`column`プロパティを指定するとチップグループが表示幅に収まらない場合折り返して表示されます。この場合矢印アイコンは表示されません。

```vue
<v-subheader>column</v-subheader>
<v-chip-group column active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>cmd1</v-chip>
    // ...省略...
</v-chip-group>
```

![chip-group-column.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/21acfb51-19d7-de7e-8864-967ef87f73ce.png)

### チップの選択

#### value

v-chipの`value`プロパティを指定しないと、デフォルトではインデックスが値として使用されます。下記の例では左端のチップから0、1、2、3とインデックスが振られます。

```vue
<v-subheader>value</v-subheader>
<v-chip-group v-model="selected1" active-class="primary--text">
    <v-chip pill><v-icon left>mdi-gamepad-round-up</v-icon>up</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-down</v-icon>down</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-left</v-icon>left</v-chip>
    <v-chip pill><v-icon left>mdi-gamepad-round-right</v-icon>right</v-chip>
    <v-chip pill><v-icon left>mdi-alpha-a-circle</v-icon>a</v-chip>
    <v-chip pill><v-icon left>mdi-alpha-b-circle</v-icon>b</v-chip>
</v-chip-group>
<div>selected : {{ selected1 }}</div>
```

![chip-group-value-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/6843a135-9a9b-ed2b-3fbe-122190b7bfcc.gif)

チップに任意の値を指定したい場合は`value`プロパティを使用します。

```vue
<v-subheader>value</v-subheader>
<v-chip-group v-model="selected2" active-class="primary--text">
    <v-chip pill value="up"><v-icon left>mdi-gamepad-round-up</v-icon>up</v-chip>
    <v-chip pill value="down"><v-icon left>mdi-gamepad-round-down</v-icon>down</v-chip>
    <v-chip pill value="left"><v-icon left>mdi-gamepad-round-left</v-icon>left</v-chip>
    <v-chip pill value="right"><v-icon left>mdi-gamepad-round-right</v-icon>right</v-chip>
    <v-chip pill value="a"><v-icon left>mdi-alpha-a-circle</v-icon>a</v-chip>
    <v-chip pill value="b"><v-icon left>mdi-alpha-b-circle</v-icon>b</v-chip>
</v-chip-group>
<div>selected : {{ selected2 }}</div>
```

![chip-group-value-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9d8dc55a-8f85-0eb4-4def-775afe4f3ce2.gif)

#### 単一

`mandatory`プロパティを指定すると必ず1つだけ選択状態となるチップグループになります。

```vue
<v-subheader>mandatory</v-subheader>
<v-chip-group v-model="selected3" mandatory active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected : {{ selected3 }}</div>
```

![chip-group-mandatory.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/8d338f7d-1d0b-e39c-b72a-3ab0ff5ddf50.gif)


#### 複数 制限無し

`multiple`プロパティを指定すると0個以上が選択状態となるチップグループになります。

```vue
<v-subheader>multiple</v-subheader>
<v-chip-group v-model="selected4" multiple active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected({{ selected4.length }}) : {{ selected4 }}</div>
```

![chip-group-multiple.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/386fd741-561f-f5fc-6b16-2f10b9f18b7c.gif)

#### 複数 制限有り

`multiple`と`max`プロパティを指定するとmax個まで選択できるチップグループになります。

```vue
<v-subheader>multiple + max=3</v-subheader>
<v-chip-group v-model="selected5" multiple max="3" active-class="primary--text">
    // ...省略...
</v-chip-group>
<div>selected({{ selected5.length }}) : {{ selected5 }}</div>
```

![chip-group-multiple-max.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3621c53b-1702-4a07-a081-c809f219b6f2.gif)