There are a couple more things that we need to do before we can close off this chapter. First of all, let's take care of BaseSelect; it still needs a validator property and some :class bindings.
Follow these steps to find out how we can do this:
- First, add the validator prop in BaseSelect.vue:
validator: {
type: Object,
required: false,
validator($v) {
return $v.hasOwnProperty('$model');
}
}
Now, let's add the :class binding; except here, we're not going to check against $dirty, because we don't have an initial empty value.
- Add the following code to the <select> element:
:class="{
'is-valid': validator && !validator.$error,
'is-invalid': validator && validator.$error
}"
- Now that the component is ready, go back to App.vue and update our BaseSelect element with its...