Create a Quick Prototype in Vue — Part 4

In the previous step, we started working on the UserForm component. In this step, we’ll continue to work on it by adding input validation, and emitting an event to the parent (rootComponent) when a user has been updated.

Update the handleSubmit method in the UserForm component to look like this:

handleSubmit(){
    if (this.validate()) { 
        this.$emit("user-edited", this.user);
    }
}

Note that we have not yet defined the validate() method, we’ll do that in just a minute. The validate() method will return true if all the properties of a user are entered correctly, and a ‘user-edited’ event will be emitted. Notice that the second parameter passed into the $emit() method (the event object), is the user data member. Remember that this is a copy of the user object that is passed into the UserForm’s initialUser prop.

Before we add the validate method, we’ll add a data member that will allow the component to display error messages in case something is not entered correctly. Update the data method in the UserForm to look like this:

data(){
    return {
        user: {...this.initialUser},
        errors: {}
    }
}

The errors data member will be an object that stores error messages that will be displayed in the form.

In order to display the error messages, we’ll bind them to SPAN tags in the template of the UserForm component. Go ahead and update the template in the UserForm component to look like this (notice the SPAN tags that each display a specific property of the errors object):

Now go ahead and add the validate method to the UserForm:

And finally, we’ll need to add the validateEmailAddress method to the UserForm, which is called from within the validate method:

I suspect that there are many other (better) ways to validate input in Vue, but this is some code that I’ve used in the past, so it was convenient.

That should do it for the UserForm! When valid data is entered into the form, it will emit a ‘user-edited’ event and pass in the user object that has been edited.

The next step is to make some changes to the rootComponent so that it listens for ‘user-edited’ events. But we’ll do one small thing first, so that we can use the app to add new users.

In the rootComponent, update the addUser method to look like this:

addUser(){
    this.selectedUser = {}; 
}

Remember (from step 1) that this method is triggered when the Add User button is pressed. And in step 3 we bound the key attribute of the user-form element to the id of the selectedUser. Setting the selectedUser to an empty object will force the UserForm to refresh and clear out all the data that is displayed in it’s form.

The only thing left to do now is add code to the rootComponent that handles ‘user-edited’ events (which are emitted from the UserForm). Start out by updating the user-form element in the template of the rootComponent to look like this:

<user-form 
    v-if="selectedUser" 
    :initialUser="selectedUser" 
    :key="selectedUser.id"
    @user-edited="handleUserEdited" />

And finally, we need to define the handleUserEdited method:

When a ‘user-edited’ event is emitted, the rootComponent needs to determine whether a new user is being added, or if an existing user has been edited. To do this, we can look at the id of the user that was passed as the event object. If it has an id, then we know that a user is being updated. If it does not, then we know that a user is being added. When a user is added, we simply need to add the user object (the event object) to the users data array. When a user has been edited, we need to replace the existing user object in the users array with the one that was passed up in the event object. Hopefully the comments that I’ve included in the code sample help!

And there you have it! We’ve created a simple prototype that demonstrates some things to be aware of when creating Vue apps. Remember that you should never mutate a prop in a Vue component. Instead you can make a copy of the prop and edit that. If you do this, you may have to add a key attribute to the component so that you force it to refresh.

The final version of your main.js file should look like this: