You should be getting used to working with components and events and so far this course has covered most of the typical types of actions you can perform on data,. You've read data, added a record, and deleted a record. Let the author show you how you can
- [Man] So you should be getting used to working with components and events. So far we've covered most of the typical types of actions that we can perform on data. We have read data from a file, added a record to that data, deleted a record from that data, and there's one more thing that we need to be able to do, and that is edits. So let me show you how you can use some special properties in React to take care of edits. Now you probably know that the contenteditable property in an HTML element, allows you to edit the contents of that element.
Now you can add that easily to any HTML page, but it's not going to modify the data at all. So in order to do that, what we can do in Vue.js is create a series of refs on the tags that we want to edit. That way we can access any changes to that data and we can use a property called blur to make sure that, when that data changes, we can deal with modifying our own internal arrays.
So let's go ahead and check out how that works. We'll go back into our data and I'm going to need to go to the list item, which is this one right here. Let me go ahead and close these other ones, I'm not going to need 'em right now. Let's go ahead and start by adding contenteditable to the fields that we want to edit. So for example, here's where we output the pet name, we could simply put contenteditable in there and set that to true. And then, let's go ahead and save this, all of our text will become editable here in these different fields.
However, if we take a look at what's actually happening with our data, so let's go ahead and clear out any errors here, and go to this view tab, and we click on this MainApp, you can see that although we've changed the HTML on the page, that's not actually changing the values of our arrays, and that's actually what we want to do. Let's close this right here so we can see just a little bit more. Contenteditable is going to allow to change the text, but it's not going to modify the data.
So we need to do a little bit more work to take care of that. What I'm going to do is create a reference to this particular element, and this is the pet name here, so let's go ahead and put this on a new line, and we'll put the closing version of it on a new line as well, and indent it. In addition to this, I'm going to add a reference to this that I'll call petName. It's going to match the name of the field, and then I can ask for a blur event.
And a blur event will execute when you exit editing this element, and when that happens, we're going to go ahead and execute a function that well call requestUpdate, and we'll pass along a piece of text with the name of the field. So we're requesting an update to this petName field. Let's go ahead and just to make it look nice here, put this on separate lines.
There that looks nice. So we need to create this method and we can scroll down here to our methods, so we'll need to add a comma right here, and then add another method here called requestUpdate. This is going to be a function, and it is going to receive a variable, I'll call it myRef. This is a local variable to this function, and then in here, we're going to modify the value of the appointment.
So if you remember, whenever we are in one of these elements, so say we are in any one of these elements, the information about the current appointment is stored in this appointment variable. So this is what we want to modify, and we want to modify whichever one of these elements, in this case we're working right now with petName so we want to modify that, so we can say this.appointment. And we want to get to these names right here, and one of the ways I can target that is by using these square brackets.
And I'll use the myRef variable here, because, remember when I created this, I'm passing along the name of the field here. So I receive that and I use it to call or modify the specific record, and that's going to be equal to this. Vue.js keeps a special property called refs, and this is an array of any element that you've added that key word refs to.
So right now we've only added that key word right here to the petName. So we're going to use that array and we're going to target the element. And then what we want is the HTML property called innerText. So we're taking the current appointment and whichever field I have modified, right, and then we're setting that to, put this on the next line, we're modifying that to the text of whichever element I blurred out of.
So let's go ahead and save this. And hopefully we did everything correctly. And what I want to show you is that I'm going to click on MainApp, which has the main array, go ahead and open this up, and now we'll edit this to Fido. You can see that as I blur out of it, it's actually updating the record in the data all the way out to the main application. Now this will also update the record everywhere, but it's important to note that it's actually recording the change all the way to the main application and the record therein.
So we can do that with pretty much all the records, dates would be a little bit more complicated so I'm just going to do it on the name, the owner, and this paragraph right here, and that should be enough for this simple application. So I'll go over here and we've got the pet name. Here we have the pet owner. And then we have the appointment notes.
Right, so let's check this out. And we'll open up this first record, this Fido record currently, and try editing everything else here. And you can see that that updates all of the record. So that's actually a fantastic way of generating updates.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering