【vuetify】v-paginationのprev、nextボタンとかのカスタム方法

# はじめに
最近、育成している友達にNuxt3での開発をしてもらっている時にvuetifyの公式ドキュメントがわからないという質問を受けたのでまとめます

## 参考サイト

vuetifyの参考サイトがあまりいいのがなかったけど、結局は公式が全てです
わかりにくいだけです

[v-paginationの公式](https://vuetifyjs.com/en/components/paginations/)
[v-paginationの公式のComponentの詳細ページ](https://vuetifyjs.com/en/api/v-pagination/#links)

## インストール

ここは割愛します。vueだったりNuxtだったりvue cli使ったり色々あるので。。。
公式見てください

https://vuetifyjs.com/en/getting-started/installation/

## basic

```vue
<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- basic -->
    <v-pagination :length="4"></v-pagination>
  </main>
</template>
```

まあこんな感じになる

![スクリーンショット 2024-05-04 9.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557457/eea9a67b-477c-dca6-ea19-3a62ff66dd28.png)

## props

https://vuetifyjs.com/en/api/v-pagination/#props

### active-colorの色を変更する

```vue
<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- props -->
    <v-pagination 
      :length="4"
      active-color="red"
    ></v-pagination>
  </main>
</template>
```

propsはこんな感じに設定

![スクリーンショット 2024-05-04 9.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557457/60cdef8e-d481-930d-91c4-33a6d234f946.png)

## event

https://vuetifyjs.com/en/api/v-pagination/#events

### prevボタンとnextボタンのクリックイベントを追加

```vue
<script setup>
import { ref } from 'vue'

const page = ref(1)

const onClickPrev = (n) => {
  console.log(n);
}

const onClickNext = (n) => {
  console.log(n);
}
</script>

<template>
  <main>
    <!-- events -->
    <v-pagination 
      :length="4"
      @prev="onClickPrev"
      @next="onClickNext"
    ></v-pagination>
  </main>
</template>
```

`@{event name}`の形で書く
今回だとprevとnextのボタンをクリックすると`onClickPrev`と`onClickNext`が呼び出される

## slot

https://vuetifyjs.com/en/api/v-pagination/#slots

### prevとnextのslotをカスタムする

```vue
<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

<template>
  <main>
    <!-- slot -->
    <v-pagination v-model="page" :length="4">
      <template #next="{ onClick, disabled }">
        <div v-show="!disabled">
          <button @click="onClick">
            <p>Next</p>
            <span class="mdi mdi-chevron-right" />
          </button>
        </div>
      </template>
      <template #prev="{ onClick, disabled }">
        <div v-show="!disabled">
          <button @click="onClick">
            <p>Prev</p>
            <span class="mdi mdi-chevron-left" />
          </button>
        </div>
      </template>
    </v-pagination>
  </main>
```

![スクリーンショット 2024-05-04 9.30.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557457/b664fa28-3451-4f88-4822-4600951debed.png)

`<template #prev>`でslotの設定します
スコープ付きスロットでpropsを渡してます

この辺参照してください

https://ja.vuejs.org/guide/components/slots#render-scope

例えば、nextスロットの場合以下のようなpropsを受け取れます

```vue
// next
{
  icon: any
  onClick: (e: Event) => void
  disabled: boolean
  'aria-label': string
  'aria-disabled': boolean
}
```

## ソース

今回使用したコードはこちらにあります

https://github.com/cats-park/qiita-about-vpagination

## 最後に

propsはusageのところに多少使い方があるので、それの応用で大体使えると思う
eventとかslotはサンプルがなくて初学者やあんまりvueとかreactとかに触れていないときついなと思う

自分も正直ドキュメント見ただけだとわからなくて、だいたいこういう感じじゃないで実装していけた感じです英語だし

**公式ドキュメントが全てであり絶対的に正しい**というのは間違いないと思うけど難解って話でした