Vue.jsで評価の星のやつ作る

1.完成イメージ

こんな感じで評価を5段階で付けることができるイメージです。

「vue-star-rating」をインストール

vue-star-ratingは星の色やサイズ、評価の刻み（0.1刻みや0.5刻みも出来る）を簡単に設定できる星評価コンポーネントです。

npm install vue-star-rating

CDNで良いならこっち

<script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>

Vue.jsと星評価コンポーネントをインポート

app.js

window.Vue = require('vue');

import StarRating from 'vue-star-rating';
import Vue from 'vue';

Vue.component('star-rating', StarRating);
Vue.component('my-component', require('./components/app.vue').default);

const stars = new Vue({
    el: '#app',
    
});

app.vue

<template>
<!-- 評価を登録するときの星コンポーネント -->
  <div>
    <star-rating
      @rating-selected ="setRating"
      v-bind:increment="1"
      v-bind:max-rating="5"
      inactive-color="#000"
      active-color="rgb(211, 247, 10)"
      v-bind:star-size="50"
      :show-rating="false"
      :rating="this.score"
    ></star-rating>
   
    //このinputに評価の値を入れる
    <input type="hidden" name="score" :value="this.rating" />
  </div>
</template>

<script>
export default {
  props: [],
  data: function () {
    return {
      rating: 0,
    };
  },
  //星を押すとそのスコアがscoreinputに入る
  methods: {
    setRating: function (rating) {
      this.rating = rating;
    },
   
  },
 
 
};
</script>

prop	内容	初期値
increament	評価の刻み。0.5なら星が半分づつ増える。	1
rating	評価の初期値。DBのデータを反映させたい時はこれに設定。	0
max-rating	星の最大個数。	will
read-only	trueなら読み取り専用。出力だけしたい時はtrue	false
show-rating	星の横の数字	true

スタイル	内容	初期値
star-size	星の大きさ。数字が大きければ星も大きくなる	50
inactive-color	塗り潰される前の星の色	#d8d8d8
active-color	塗り潰した星の色	#ffd055
border-color	星の境界線の色	#999
border-width	境界線の幅	0
rounded-corners	星の角を丸くするかどうか	false
inline	星評価を設定してinlineで設定	false
glow	なんか星の周りにぼんやり輝き。ない方がシンプルで良さげ	0
glow-color	上記ぼんやりの色	#000
text-class	特定の星評価コンポーネントの評価テキストをスタイルするCSSクラス名	""

ただ出力したいだけなら「:rating」にbladeテンプレートからpropsで渡ってきた値を入れてあげればOK。
あとは「:read-only」をtrueにするのも忘れずに。

app.vue

<template>
  <div>
    <star-rating
  
      v-bind:increment=".1"
      v-bind:max-rating="5"
      :rating="this.score"
      inactive-color="#000"
      active-color="rgb(211, 247, 10)"
      v-bind:star-size="20"
      :show-rating="true"
      :read-only="true"
      :fixed-points="1"
      class="c-card__star"
    ></star-rating>
  </div>
</template>

<script>
export default {
  props: ["score"],
  data: function () {
    return {
      rating: 0,
    };
  },
 
};
</script>

こんな感じで表示させるだけで編集はさせない

参考