Fixing the register form component

Now that we've installed VeeValidate globally in our application, all of our components have an errors property by default. This has now broken the user registration form component, as we defined a local state property called errors, which now conflicts with the VeeValidate version. There are some open pull requests with the library creators on GitHub to prevent this kind of property declaration on components where we don't actually need validation. However, for now, we just need to deal with this by changing our property names.

 

Start by opening up the ClientApp/components/app/RegisterForm.vue file, and then modify the b-alert element at the top of the form tag in the template section as follows:

<b-alertvariant="danger":show="regErrors!==null"
dismissible@dismissed="regErrors=null">
  <divv-for="(error, index) inregErrors":key="index">{{ error[0] }}</div>
</b-alert>

Next, in the data function of the script section, make the following...