Introduction to Vue.js Working with Methods
This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Working with Methods" Lesson
>> Sarah: A lot of times we're probably not going to be changing the hue on the entire page [LAUGH] on the mouse event. So let's look at a kind of more common used case. We're gonna build off of this demo through the course. So we've got something like this woman saying that it's lovely after it rains.
[00:00:15] It's comment form, and if I wanna add a comment, I say I like tacos, and that will be appended to, like as a new comment. So as we're working with that Vue instance, we start off with new comment is an empty string. We have comments which is an array of all of the comments that we currently have.
[00:00:39] And then in our methods, we have a thing called add comments. In add comments, we're gonna take this.comments and we're gonna push this.newComment on to that array then empty it so when we're done with it. You might have assumed, but in case you didn't, that what we have here is an li v-for comment in comments in outputing the comment, you've seen that already.
[00:01:03] And then in the input we have a v-model that's that new comment. That empty string is that v-model, so as I'm typing it's going to access that. But then I say @keyup.enter so I don't want to keep submitting that method that's going to add it to the form every single time I'm typing.
[00:01:21] I want to make sure that I'm saying @keyup.enter so that when I hit the enter key then that we're adding it to the form. So that's that addComment placeholder is just a normal HTML thing. So if we look back, that's that addComment, and addComment is the method that we're executing here.
[00:01:41] So it's actually like almost no code to make create this comment form which I absolutely love, that's really, really, really fun and easy to use. So another thing that we kind of typically do is we need some responses from a server. So I'm going to use Axios in this demo and we're just going to have our name.
[00:02:05] I have my Chrome autofill, that's my email. I don't have to hide it from you cuz it's my name and you'll probably figure it out. [LAUGH] And how do I turn off caps lock? I don't know, and then I submit it and then the response from the server is getting outputted here.
[00:02:23] If we look at the code which we should definitely do. In here we have a bunch of those labels, and the inputs labels, and the inputs as we have done before. We have our v-model for name that's connected to the name, which is currently an empty string. I'm writing required, so that HTML5 is going to validate.
[00:02:45] Do people even say HTML5 anymore? I don't know, HTML is gonna validate those form inputs, and make sure that I can't submit the form until it's working. But I also have that quick way of writing so that if people haven't filled out this form yet, it's not actually going, that submit button is actually not going to show up.
[00:03:08] So I could do execute other kinds of logic for this as well. Then, we have this response that's an empty string. And, in our methods, we're gonna say submit form, so this is all part of one form. So the submit is not on the submit button. The submit is on the form itself.
[00:03:29] And we say @submit.prevent, so that's that modifier of e.prevent default that we're kind of used to writing for forms. So we say submit form and then in our methods we have submit form. In axios.post, I'm actually using this thing called typicode which is fake server responses for the purposes of demos, so that we don't have to set up a bunch of stuff.
[00:03:52] So if you're ever making a demo, that's a kind of fun one to use. Here, we're making a relationship. We're actually creating a new object that we're sending there. So we're saying userID is this.userID, name is this.name, that's all of these guys here. Then response, I'm saying this.response is JSON.stringify, that's just that we're like creating it so that you can actually see the response, and that's just outputting that as a string.
[00:04:22] So this is just like the number of spaces and things, so that you can see the response here. And we also are catching any errors that we have in case there are errors from that form. So, not a lot of stuff in order to create a form with a response from a server.
[00:04:42] I really love Axios, if you're not familiar with Axios, it's a library. It does a lot of the things that you're used to jQuery doing but you don't have for AJAX, but you don't have to load all of jQuery. It's much smaller than jQuery is. So if you're using something like Vue, and you need that kind of form submission, Axios is a really, really cool thing.
[00:05:01] Also the guy who writes it is really nice. [LAUGH] Which is not important but kind of important. So we've got our form submit.prevent. We're submitting the form and that calls this method. So that could really be anything that you need to execute as you're submitting that form. Let's say we have a bunch of Netflix data, and this is actually real Netflix data.
[00:05:26] So these are all of these titles and a bunch of these user ratings for each show that's worth showing here. So we got two buttons, we got lowest rated and highest rated. So we're going to sort by lowest rated and it sorts lowest to highest, and then highest rated.
[00:05:47] I have no idea why Black Mirror is like so low rated, I love that show, maybe it's too creepy for people. And then highest rated we've got Gray's Anatomy is really hot, I don't know, I don't know why people like the things that they like. So we got the, this basic sorting of these forms.
[00:06:06] Lets take a look here at the code. In the ratings info we have an array called ratings info and that's going to house all of our titles and our ratings and the ratings are just numbers and the titles are strings. We have title and ratings so that we can create two columns from them.
[00:06:26] If we go look at the table here, we have a table and we're going to say key and column to create the columns. So one thing to note is, up until now we've been saying something like Item in items,or something like that. English doesn't necessarily have the best pluralization all the time.
[00:06:46] Like if you have bunch of octopi, you'd have octopus and then octopi, so It's not just appending an s, and taking the s off. You can actually write whatever you need for this one. It can be anything, I wrote key in columns, you could write anything. Inside of ratingsInfo, I said entry in ratingsInfo.
[00:07:07] But I could have also said ratings info item, or you know, whatever I wanted to. So, we've got these nested v-fors and then we're outputting pieces of that table. So, that whole table is drawn from these v-for, v-for directives. Then we have these buttons with click events on them.
[00:07:29] So we say @click sortLowest and sortHighest. That's my very fancy naming schema. And in the methods we've got sortLowest and again like I said before, you can't use an arrow function here but you can use it inside of the method itself. So we're saying this.ratingsInfo, remember this is ratingsInfo here.