Vue User Manager - Part 4

In this step, we'll configure the user-form component to emit an event when a user is edited. The parent (root component) will listen for the event and then update the database and re-render the user-list.

Add this code to the body of the handleSubmit() method in the user-form component:

const user = {
    id: this.userId,
    firstName: this.firstName,
    lastName: this.lastName,
    email: this.email
}
this.$emit('user-form-submitted', user);

Now, when the form is submitted, we create a 'user' object and fill it with the userId prop and each data member. Remember that if you refer to a data member or a prop in a component, you must prefix it with 'this.'. You also need to use the 'this.' prefix if you wanted to call a method that is defined in the component.

Then we call the built-in $emit() method (notice the 'this.' prefix). Every component will automatically have this method. There are many other built-in methods, and they all start with '$'. So if you ever see a method call whose name begins with '$', you'll know it's a built-in method that is available to any component that you create.

The first parameter passed into $emit() is the name of the event that we are emitting. Later, when we listen for this event in the parent component, we'll need to know it's name. The second parameter for $emit() is often called the 'payload'. This is the data that we are sending up the parent that is listening for 'user-form-submitted' events.

Now, let's set up the parent to listen for 'user-form-submitted' events. In the template of the root component, update the user-form element to look like this:

<user-form 
	v-if="selectedUserId" 
	:userId="selectedUserId" 
	:key="selectedUserId" 
	@user-form-submitted="handleUserFormSubmitted" />

Note that I've reformatted the user-form element so that each directive is on it's own line (to make it easier to read). I've also added a directive to listen for 'user-form-submitted' events. Remember that the '@' is a short-cut for the v-on directive. The handleFormSubmitted() method will be triggered when the event occurs (which is not yet defined).

Now we'll add the handleFormSubmitted() method to the root component. Add this code to the 'methods' property of the root component (remember to put a comma after the previous method):

handleUserFormSubmitted(user){
    uda.updateUser(user);
    this.users = uda.getAllUsers();
}

Run the app in the browser, click on a user in the list, then edit the user and press the Submit button. This will cause the user-form to create an object that contains the values of the userId prop and each of the data members (which are bound to the INPUT elements). Then the user-form will emit a 'user-form-submitted' event and pass the user object as the payload. The root component is set to use the handleUserFormSubmitted() method as the event handler, and the payload (a 'user' object) will be passed in as a parameter. The body of this event handler uses the data access object to update the database, and then re-assigns all the users from the database to the 'users' data member of the component. Data members in Vue components are 'reactive', so when they are changed, anything that is bound to them are automatically re-rendered. The user-list is bound to the 'users' data member, therefore it should automatically re-render to reflect the change in the user.

So at this point, our CRUD app is allowing us to 'read' data (it displays users information), and it's allowing us to 'update' data. We'll have to work on the 'creating', and 'deleting' next.

We should also add user input validation form when the user-form is submitted. Right now it allows any data to be submitted. And on top of that, we did not add validation code to the UserDataAccess class. Ideally, both would include validation code to prevent the database from being corrupted.

At this point, please spend some time reviewing all the code in main.js, and be sure to ask questions about anything that is confusing to you. Learning a framework, such as Vue, is a huge task and takes time. The more you write code, look at code, and ask questions, the faster you'll learn!