Now that we have our input, we need a way to display the selected choice to the user. Follow these steps to create a StarRatingDisplay component:
- Create a new component called StarRatingDisplay.vue in the src/components folder.
- In the <script> part of the component, in the props property, we need to create three new properties: maxRating, rating, and votes. All three of them will be numbers and non-required and have a default value. In the methods property, we need to create a new method called getStarName, which will receive a value and return the icon name of the star:
<script> export default { name: 'StarRatingDisplay', props: { maxRating: { type: Number, required: false, default: 5, }, rating: { type: Number, required: false, default: 0, }, votes: { type: Number, required: false, default: 0, }, }, methods: { getStarName(rate) {...