Building Forms with Vue.js

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