View's data option is for keeping track of reactive state within the current component or, in our case, in the View application. It will always be a function that returns an object. That object's top-level properties are exposed directly via the component instance. Take this shopping list app, for example.
In its data, we have a number of properties, such as header, new item, new item high priority, and items. As you can see in the template above, we can reference those data properties directly. Also, you might notice that in our template, as of now, we're pushing items to our shopping list directly. And this happens on the key up enter event of our new item input.
Not only that though, it also happens on the click of our save item button. So we've got this very manual code. duplicated twice in our template. Let's refactor this repeated code into a nicely named method.
But where do we define methods? Conveniently enough, we can define methods in a view option called surprise, surprise methods. Here, we can add any methods that encapsulate specific functionality for our application instance inside of our methods option. Let's add a method called save item.
Then inside of this function is where we'll add our JavaScript logic. Since we already have it in the template above, I'll just copy and paste it from there. Since we've moved our logic from the template to our method. One thing to note is that inside of our methods, we don't have automatic access to our data like we did in the V on.
Instead, we'll need to explicitly reference it using the this keyword. Now, we can replace the JavaScript that we had in our beyonds with our nice semantically named method. Nice. Doesn't that look better?
It's also interesting to note here that V on is smart enough to recognize both regular JavaScript and functions that we've defined in our methods. Notice that we didn't have to include the parentheses. Now, when we go and check things out in the browser, perfect. Everything still works.
We've taken some great strides to make our template easier to read and maintain. By removing the logic from our template to our methods, we can write cleaner JavaScript and provide clear method names so we can better understand what our templates are doing. Plus, this will make future maintenance, testing and debugging much easier for us to understand. Even with those awesome improvements though, we're still not quite done.
Notice that when we add a new item, that the old item sticks around in our input. This is because we're not resetting our new item when we add it to our items. To fix that, we'll set our new item to an empty string at the end of our save item method. I'll try it out in the browser once more.
Perfect. The item gets added to the end of the list and the add item input is also cleared out. It's exactly what we wanted. Resetting data in the client might be a little different than what you're used to, especially if you're coming from a language like PHP.
With Vue, we have to be mindful that we're in charge of maintaining the state of our app. This is an important part of the user's experience, so we need to make sure that we're not leaving data behind that shouldn't be there. Lastly, it's important to note that methods cannot be defined as arrow functions. This is not possible.
as the this keyword would no longer refer to the view application instance. Alright, with our template cleaned up and refactored to avoid future issues, we've finished adding the functionality to save our new items. In the next lesson, we'll work on hiding our form when we're not using it. View's data option is for keeping track of reactive state within the current component or, in our case, in the View application.
It will always be a function that returns an object. That object's top-level properties are exposed directly via the component instance. Take this shopping list app, for example. In its data, we have a number of properties, such as header, new item, new item high priority, and items.
As you can see in the template above, we can reference those data properties directly. Also, you might notice that in our template, as of now, we're pushing items to our shopping list directly. And this happens on the key up enter event of our new item input. Not only that though, it also happens on the click of our save item button.
So we've got this very manual code. duplicated twice in our template. Let's refactor this repeated code into a nicely named method. But where do we define methods?
Conveniently enough, we can define methods in a view option called surprise, surprise methods. Here, we can add any methods that encapsulate specific functionality for our application instance inside of our methods option. Let's add a method called save item. Then inside of this function is where we'll add our JavaScript logic.
Since we already have it in the template above, I'll just copy and paste it from there. Since we've moved our logic from the template to our method. One thing to note is that inside of our methods, we don't have automatic access to our data like we did in the V on. Instead, we'll need to explicitly reference it using the this keyword.
Now, we can replace the JavaScript that we had in our beyonds with our nice semantically named method. Nice. Doesn't that look better? It's also interesting to note here that V on is smart enough to recognize both regular JavaScript and functions that we've defined in our methods.
Notice that we didn't have to include the parentheses. Now, when we go and check things out in the browser, perfect. Everything still works. We've taken some great strides to make our template easier to read and maintain.
By removing the logic from our template to our methods, we can write cleaner JavaScript and provide clear method names so we can better understand what our templates are doing. Plus, this will make future maintenance, testing and debugging much easier for us to understand. Even with those awesome improvements though, we're still not quite done. Notice that when we add a new item, that the old item sticks around in our input.
This is because we're not resetting our new item when we add it to our items. To fix that, we'll set our new item to an empty string at the end of our save item method. I'll try it out in the browser once more. Perfect.
The item gets added to the end of the list and the add item input is also cleared out. It's exactly what we wanted. Resetting data in the client might be a little different than what you're used to, especially if you're coming from a language like PHP. With Vue, we have to be mindful that we're in charge of maintaining the state of our app.
This is an important part of the user's experience, so we need to make sure that we're not leaving data behind that shouldn't be there. Lastly, it's important to note that methods cannot be defined as arrow functions. This is not possible. as the this keyword would no longer refer to the view application instance.
Alright, with our template cleaned up and refactored to avoid future issues, we've finished adding the functionality to save our new items. In the next lesson, we'll work on hiding our form when we're not using it.