【簡単すぎる】Laravel+Vueで星評価機能を実装してみた

背景

• Laravelで星評価機能を実装する必要があった
• Vueの既存ライブラリ「vue-star-rating」を活用すると楽に実装出来そうだったので、やってみた

やり方

ターミナルで以下をそれぞれ実行

npm install vue
npm install vue-star-rating

jsファイルに追記

resources/js/app.js

import StarRating from 'vue-star-rating'
Vue.component('star-rating', StarRating);
const app = new Vue({
    el: '#star',
    data: {
        rating: 0
    }
});

ターミナルで以下を実行

npm run dev

→これで、<star-rating>タグを利用可能になります。

ブレードで星表示

<div id="star">
　<star-rating v-model="rating"></star-rating>
</div>

→これで星が表示されるはずです。

星のサイズなどの調整は以下を参考にすればできると思います。

参考

https://github.com/craigh411/vue-star-rating
https://jsfiddle.net/craig_h_411/992o7cq5/
https://www.kabanoki.net/4632/