v-paginationのページ番号にアンダーラインを引きたい

Question

実現したいこと

Vue3.jsおよびVuetify3のv-paginationコンポーネントを使ってページング機能を実装しております。
ページ番号にアンダーラインを引きたいのですが、styleタグにどのように記述すればよいかわからず、ご教示いただきたいです。

発生している問題・分からないこと

<v-patination></v-patination>の子要素にcssを適用する方法がわからない

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

v-deepセレクタを使って下記コードなど試しました。
::v-deep .v-btn__content.span{text-decoration: underline;}

補足

特になし

Comments

[FKM]

v-paginationを使わずにページャーを作る必要がありそうですね。

Answer 1

v-paginationではテキストを制御するようなオプションは付与されていないので仕様上不可能と思われます（海外サイトも含めて調査してみたのですが、有効な解決策はなかった）。
なので、代替手段を選択した方が手っ取り早いです。

案の一つとしてrouter-linkタグをループさせる方法があります（SPAの場合）。

<router-link :to="`?page=${p}`" v-for="(p,idx) in page" :key="idx">
    <button class="page">{{ p }}</button>
</router-link>

このclass="page"の中にスタイル制御すれば、装飾可能です。また、v-bind:classにすれば、選択されたページだけ装飾することも簡単です。