Sometimes you need to transform the value of some data and there's a couple of ways you can do that. Take a look at how you can modify dates with computed properties.
So, it's a little bit hard to maintain. Now, a better option is to use computed properties. It's sort of a more formal way of modifying a property, but it generates a new variable based on that transformation. So, it's a little more useful because you can place it anywhere in your code where you need that property to be displayed. Now, one thing that you need to note about computed properties is that they will re-evaluate only when their dependencies have changed, so it will update as long as you're using a property from the data section that is reactive.
If you use something else, it may not update. We'll take a look at an example in a minute. There's a third way to do this and that's through a separate configuration property called methods. We're going to cover that in a later video but it's pretty similar to a computed property. The difference is that it doesn't generate a new variable, but it does cause recalculations and redraws every time it is called. So, let's say that we wanted to change the format of this date.
So, a better version of doing that would be to create a computed method. So, in addition to creating props here, we can create a section called computed and in there, we can create a series of methods. And so, we'll create a property called formattedDate and that's going to be a function literal here, and then, we will return pretty much the same thing.
Let's go ahead and make it less characters, so we'll note that there is a difference. So, if I save this, nothing's going to happen because right now, it's still using the appointment date, so we'll take this new variable that gets created for us and we'll replace this variable right here with our new variable, so it needs to be this .formattedDate and now you can see that it picks up the formatted date. So, that's pretty cool. And this different variable has a new version of our date.
It's also based on our original appointment date. Now, that appointment date is a reactive property and, as a matter of fact, it comes from this props right here. So, if something in our applications causes this appointment to change, then our display will update. This new formatted date will be recalculated from the original appointment date and then it will display properly over here. The way that we can tell is to take a look at the Inspector and then, we'll go head and switch to the View section right here.
You have to have installed the View Developer Tools plugin. And in here, you can see that we see sort of the structure of the application and when we click on one of these, you'll see that right next to it, it give you this $vm0 with a dollar sign at the beginning. And we can see now the structure of the application here, we've got the Main App, Appointments List, and every time I click on one of these, it'll show you the $vm0, so you need to note that. And then, I need to pull up the Console.
Let's go ahead and click right here and then say Show Console Drawer. Let's go ahead and scroll, so that our first property shows up right here and then we can see the Console there. So, if you want to target some elements in this application, what we could do is, first click on the element that you want to target and then you'll have access to all of the variables within that property. So, including this new formatted date attribute or property that we created.
So, if we go ahead and say dollar sign vm zero, and we have to be clicked on this element, and then we do a dot and then we'll pull the formattedDate, then it's going to show you our formatted date. Now, if we want to get to the original date, it's right here. So, if we say $vm0 dot appointment dot aptDate, it's going to get to that whole address and if we update that, so let's go ahead and copy this from here.
Actually, we'll copy those strings, too. And we'll change this to 2018 and when we enter that, because the original appointment date changed, that made the application do an update in the DOM of this particular element. And that's not going to be the same if you defined this as a nonreactive property, so if this formattedDate has a nonreactive property, then we wouldn't be able to update the formattedDate.
Let me show you how that works. If you had something here like, return new Date, this isn't a reactive property, so if we do that, it's just going to give us the current date for the application, but that original current date is not going to be able to update. So, if you wanted to update this every time that that element was called, then you would want to use a method, which, as I mentioned, we're going to talk about in a few short videos. So, let's go ahead and leave it as this right here and what I want to do now is go ahead and modify the date with a new format.
This substring isn't going to do. So, to modify this date, I'm going to use a library called Moment.js, you can learn more about it at this URL. In order to do that, we're going to need to load that library. And so, we're going to go first to the App.view section right here, and in addition to importing the appointments, we're going to import our library. And this is going to be imported from our node modules, I've already installed that for you.
If you look at packets.json, that's one of the libraries that I am uploading for you automatically here. Let's go ahead and save this. We'll also need to import it here in Appointing List Item. Right before this export default, we'll need to do import moment from moment and then we can use it right here. Looks like we already have the variable pointing to the appointment date, so I'm just going to cut that out of there and then use my Moment library.
So, we'll say moment and then, in parentheses, we'll make sure that we cast our text to a date by saying new Date and then, we will place the value of the variable that we want to change, so this. And then, we'll use the format method of the Moment library to tell it the format that we want this text to be in. So, that will be month, dash date, dash YY, which is year, and then comma hour, minutes.
We won't do seconds and just put a note for am or pm. So, you can see that now my dates are formatted in a better way than they were before. I'm not getting the military format. You can use the Moment library to format your dates however you want them. So, the important thing to remember is that computed properties gives you access to a property that can be evaluated from and react to changes in another property.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering