We are going to create a star rating input, based on a five-star ranking system.
Follow these steps to create a custom star rating input:
- Create a new file called StarRatingInput.vue in the src/components folder.
- In the <script> part of the component, create a maxRating property in the props property that is a number, non-required, and has a default value of 5. In the data property, we need to create our rating property, with the default value of 0. In the methods property, we need to create three methods: updateRating, emitFinalVoting, and getStarName. The updateRating method will save the rating to the data, emitFinalVoting will call updateRating and emit the rating to the parent component through a final-vote event, and getStarName will receive a value and return the icon name of the star:
<script> export default { name: 'StarRatingInput', props: { maxRating: { type: Number, required: false, default: 5...