Vuetify でレーティング表示を使ってみる
今回は、お手軽にスター（星）型のレーティング機能を実装できる v-rating について、書いていきます。
↑こんな感じのレーティング機能が表示できます。
Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。
まずはコードをご紹介
いつも通り、コードのご紹介です。この v-rating 、機能の割にコードがとても簡潔なので良いですね。
Vue側はこんな感じです。
<template> <v-rating background-color="orange lighten-3" color="orange" hover="true" large v-model="satisfaction" ></v-rating> </template>
そして、 v-model を使用しているので、data側にはあらかじめ satisfaction (名前はなんでも良いです)という data を記述しておきます。
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
satisfaction: 5,
}
})
</script>
または、単一コンポーネントを使用している場合はこの様に書くこともできます。
export default {
data: () => ({
satisfaction: 5,
})
}
もうお気づきだと思いますが、v-rating に紐づける v-model に指定しているのは、初期状態のレーティングの数値です。
上記の例では、星5が初期値になるということですね。
v-ratingのサンプル
いつもどおり、サンプルをご用意しました。実際に動いている状態をご確認ください。
星アイコンにhoverするとレーティングが左右に滑らかに動き、クリックで値が変わるのを確認できると思います。
v-rating のサンプルを見る
そのほかのオプション（値を0.5ごとにするなど）
柔軟なカスタマイズにも対応できるのが Vuetify の良いところですが、もちろんこの v-rating にも豊富なオプション(正確には、propsという概念)があります。
たとえば、上記の例では1ごとの評価しかできないレーティング機能ですが、各種 props を使用することで、それを0.5ごとの評価ができるレーティング機能に変更することなどができます。
<template> <v-rating v-model="satisfaction" background-color="grey darken-1" color="orange" half-increments="true" half-icon="$ratingHalf" empty-icon="$ratingFull" full-icon="$ratingFull" large ></v-rating> </template>
↑ half-increments=”true” として、0.5ごとのレーティング機能をオンに。そしてその際使用するアイコンを、half-icon=””として指定しています。
これで、先ほどの当サイトのサンプルページの下側にある例の様に、0.5ごとのレーティングが使用できる、というわけです。
そのほかにも指定できる props がたくさんあり、一覧は以下APIページにあります。
v-rating API — Vuetify
そして、コンポーネントの公式ページは以下です。ここを見ると、ほかにも色々な用例が載っていますので、一読をお勧めします。
レーティング・コンポーネント — Vuetify
ハマりやすそうな点など
実は、0.5ごとのレーティング機能を表示しようとした際、私の手元では
適切に half-icon=”$ratingHalf” として指定しているはずなのに、なぜかハーフ用アイコンがきちんと表示されない不具合がありました。
そちらを解決した方法を書いておきます。
0.5 表示の時に星ボタンに付与されるclass名は mdi-star-half-full となっているのですが、
どうもこの時読み込んでいたmaterial-design-icons の中には、
そのclass名で必要なアイコンが定義されていない模様でした。
これは、読み込んでいた material-design-icons のバージョンが低かったための現象の様でして、
次のように現在の最新バージョン 5.x を指定してあげたところ解消しました。
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
同様の現象が起きた場合、試してみると良いかもしれません。
この記事のまとめ
今回は、Vuetifyを使用して手軽にレーティング機能を表示させることができる、
v-rating についてご紹介しました。
実際の用例としては、
（フロントエンドにVuejs、ユーザーの入出力を伴うデータ管理にはfirebase(firestore)を使用していると想定した場合で書きます）
あらかじめfirestore内に、「とある項目についてのユーザー評価のレーティングを管理するフィールド」を用意しておき、
それをVuejs側で取得して、dataに格納しておくとします。
そして、例えば星をユーザーがクリックしたタイミングでこれまでの評価総数(つまり平均値)と、そのユーザーがつけた値を比較して、計算させます。
計算が済んだら、firestoreの同フィールドに、計算後の値を送信して、最新のレーティングとする、
という様な処理を記述する様な方式で実装して、使用することが想定できそうですね。
当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。