After creating the input and the display, we need to join both together in a single component. This component will be the final component that we'll use in the application.
Follow these steps to create the final StarRating component:
- Create a new file called StarRating.vue in the src/components folder.
- In the <script> part of the component, we need to import the StarRatingDisplay and StarRatingInput components. 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, with a default value. In the data property, we need to create our rating property, with a default value of 0, and a property called voted, with a default value of false. In the methods property, we need to add a new method called vote, which will receive rank as an argument. It will define rating as the received value and define the inside variable of the voted component as true:
<script...