Vue.js vue-rate-itを利用してハート型の評価機能を実装する

npm i -S vue-rate-it

npm i -S bootstrap

<template>
  <div id="app" class="container">
    <img alt="Vue logo" src="./assets/logo.png">
    <h3>vue-rate-it</h3>
    <div class="col-4 mx-auto" style="width: 350px;">
      <heart-rating  @rating-selected="rating = $event" :rating="rating"></heart-rating>
      <div>ハートの数 <strong>{{rating}}</strong></div>
      <div><a class="text-danger" href="#" @click.prevent="rating = 0">ハートをリセット</a></div> 
    </div>
  </div>

</template>
     
<script>
import {HeartRating} from 'vue-rate-it';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

export default {
  name: 'app',
  data () {
    return {
     rating: 3
    }
  }, 
  components: {    
    HeartRating
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:  0 auto; 
  text-align: center;
  color: #2c3e50;
  margin-top: 260px;
  width: 50%;
}
</style>