A Good Review for the Takeout

Introduction

In this project, you will learn how to create a multi-dimensional rating component using Vue.js and the Element-UI library. The rating component will allow users to rate different aspects of a takeout order, such as the speed of delivery, the flavor of the food, and the quality of the packaging.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to create a custom Vue.js component called my-rate.vue to handle the multi-dimensional rating functionality.
• How to use the el-rate component from the Element-UI library to implement the individual rating dimensions.
• How to emit a change event from the my-rate component to notify the parent component when the ratings are updated.
• How to customize the styling and layout of the rating component to match the design requirements.

🏆 Achievements

After completing this project, you will be able to:

• Create a reusable Vue.js component with custom functionality.
• Use the Element-UI library to build complex UI components.
• Manage and communicate data between parent and child components in a Vue.js application.
• Style and layout Vue.js components using CSS.

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── 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

Among them:

• index.html is the main page.
• The element-ui-2.6.2 folder contains the script files, style files, and fonts related to the element-ui library.
• The js folder contains the files related to the vue and http-vue-loader libraries.
• my-rate.vue is the file of the encapsulated scoring component.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Complete the My-Rate Component

In this step, you will complete the my-rate.vue component to implement the multi-dimensional rating functionality.

1. Open the my-rate.vue file in the project folder.
2. In the template section, add the HTML structure for the rating component:

<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>

This structure includes three el-rate components, one for each rating dimension: speed, flavor, and packaging.

3. In the <script> section, add the changeHandler method:

<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>

The data function returns an object with three properties: speed, flavor, and pack, which store the current rating values for each dimension.

The changeHandler method is called when the rating for any dimension changes. It checks if all three ratings have been set, and if so, it emits a change event with an object containing the updated rating values.

4. Save the my-rate.vue file.
5. Go back to the browser and refresh the page. The completed interface is as shown in the figure:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.