Adding the final touches

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:

1. 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.

2. Add the following code to the <select> element:

:class="{
  'is-valid': validator && !validator.$error,
  'is-invalid': validator && validator.$error
}"

3. Now that the component is ready, go back to App.vue and update our BaseSelect element with...