-
Create a
RatingControl.vue
file intosrc/components
folder. This component should contain 3 buttons (Poor
,Average
,Great
). On each button click you have to call a method which will emit aupdate:modelValue
event. Declare the propsmodelValue
and bind thev-model
parent value with a css class.active
, if the value match with your button. Add aquestion
props to customize the question label. -
Create a component
TheForm.vue
into thesrc/components
folder. Add following data object{ rating: null }
. Add a form tag, with a submit event listener. Use theRatingControl
component inside your form and usev-model
on rating property. Set the question attribute toWhat is your Vue skill level ?
. Add a submit button. The submit method will display aconsole.log(this.rating)
, and reset the rating property tonull
. -
Use
TheForm
component inApp.vue
.
npm install
npm run serve
npm run build
npm run lint