Vue.js を使った多次元評価コンポーネントの作成

はじめに

このプロジェクトでは、Vue.js と Element-UI ライブラリを使って多次元評価コンポーネントを作成する方法を学びます。評価コンポーネントを使うことで、ユーザーは外食注文の様々な側面、例えば配達速度、料理の味、包装の品質などを評価できます。

👀 プレビュー

多次元評価コンポーネントのデモ

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

my-rate.vue という名前のカスタム Vue.js コンポーネントを作成して、多次元評価機能を処理する方法。
Element-UI ライブラリの el-rate コンポーネントを使って、個々の評価次元を実装する方法。
評価が更新されたときに、my-rate コンポーネントから change イベントを発行して親コンポーネントに通知する方法。
評価コンポーネントのスタイリングとレイアウトをカスタマイズして、デザイン要件に合わせる方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

カスタム機能を備えた再利用可能な Vue.js コンポーネントを作成すること。
Element-UI ライブラリを使って複雑な UI コンポーネントを構築すること。
Vue.js アプリケーションにおいて親コンポーネントと子コンポーネント間でデータを管理し、通信すること。
CSS を使って Vue.js コンポーネントのスタイリングとレイアウトを行うこと。

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── element-ui-2.6.2
│   ├── element-icons.ttf
│   ├── element-icons.woff
│   ├── element-ui.min.js
│   └── element-ui.style.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└──  my-rate.vue

その中で：

index.html はメインページです。
element-ui-2.6.2 フォルダには、element-ui ライブラリに関連するスクリプトファイル、スタイルファイル、およびフォントが含まれています。
js フォルダには、vue および http-vue-loader ライブラリに関連するファイルが含まれています。
my-rate.vue は、カプセル化された評価コンポーネントのファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

マイレートコンポーネントを完成させる

このステップでは、多次元評価機能を実装するために my-rate.vue コンポーネントを完成させます。

プロジェクトフォルダ内の my-rate.vue ファイルを開きます。
template セクションで、評価コンポーネント用の HTML 構造を追加します。

<div class="block">
  <span class="demonstration">Please rate the takeout: </span>
  <ul class="rate-list">
    <li>
      <!-- TODO: Completing the el-rate property -->
      Speed of delivery:
      <el-rate v-model="speed" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completing the el-rate property -->
      Takeout flavors:
      <el-rate v-model="flavor" show-score @change="changeHandler"></el-rate>
    </li>
    <li>
      <!-- TODO: Completing the el-rate property -->
      Takeout packaging:<el-rate
        v-model="pack"
        show-score
        @change="changeHandler"
      ></el-rate>
    </li>
  </ul>
</div>

この構造には、速度、味、包装の各評価次元に対応する 3 つの el-rate コンポーネントが含まれています。

<script> セクションで、changeHandler メソッドを追加します。

<script>
module.exports = {
  data() {
    return {
      speed: 0,
      flavor: 0,
      pack: 0
    };
  },
  /* TODO */
  methods: {
    changeHandler() {
      if (this.speed && this.flavor && this.pack) {
        const rate = {
          speed: this.speed,
          flavor: this.flavor,
          pack: this.pack
        };
        this.$emit("change", rate);
      }
    }
  }
};
</script>

data 関数は、各次元の現在の評価値を格納する speed、flavor、pack の 3 つのプロパティを持つオブジェクトを返します。

changeHandler メソッドは、いずれかの次元の評価が変更されたときに呼び出されます。すべての 3 つの評価が設定されているかどうかを確認し、その場合は更新された評価値を含むオブジェクトで change イベントを発行します。