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

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

vue-rate-itをインストールして、よくある評価機能を実装するサンプルコードです。 vue-rate-it は星型も画像も可能ですが、今回はハート型を利用してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1
  • vue-rate-it 2.1.0

※CentOS8にVue.jsの環境構築はこちら

vue-rate-itインストール

下記のコマンドでインストールします。

bootstrapもインストールしてます。

vue-rate-itの利用

vue-rate-itを利用するためのサンプルコードです。

src配下のApp.vueを下記のとおりに編集します。

編集が終われば、ブラウザから http://プライベートIP:8080 にアクセスして、ハート型の評価機能が実装されていることが確認できます。