Sorting Table Data with v-for

[00:00:00]
>> Okay, let do another use case I am showing you a lot of use cases with methods because methods are something that we are gonna use all the time. It is just one of the most important tools in your tool basket toolbox. Yes, that's right toolbox. So we're gonna go over a few different examples of that.

[00:00:17]
So, I've got a bunch of data that is actually from a real Netflix API hard coded here, but this is actually real data that you can get when you're working with Netflix API. So, if I say, lowest rating to highest rated, you can see all of that data filter and change.

[00:00:37]
And I don't really know why black mirror is so low like I really love that show. And Grey's Anatomy is really high I have no idea why people like the things that they do. So, okay, if we're looking through lowest rated and highest rated and we're going to make that work, how would we make that work?

[00:00:55]
We have at click sort lowest, and at click sort highest. As you might imagine, those are two methods that we are going to create. Then we've also got this table. We've got a table that is outputting, some head pieces, and we're looping through to create all of the rows here.

[00:01:15]
And something to mention because we did item in items. I kind of touched on this earlier, you might think that you need to put something with an S and then just the thing in order to like plurals of s and then the thing like item in items. But English doesn't really work that consistently like if you have occupy there's no like singular, I think it's like octopus and occupy.

[00:01:38]
So, it doesn't really quite work like that. So this can actually be whatever you want it to be. It does not have to be the singular version of this. You can name it whatever you want to. And that's really helpful when we start to get into computed properties because you might notice that you'll start to change.

[00:01:55]
This value as we work with computed, and it's all of the rest of this stays stable, right? Like I can easily switch that out and everything inside of it doesn't need to be changed as well. But we'll get into that a little bit more when we talk about computed properties.

[00:02:12]
Now when we look at the app. We've got columns which are title and rating. We know from before with the model that I could have used like a different type of index for that and pass in the v4 and grab the key and things like that. But, instead of doing that I named it title and rating just in case I wanna change the name of that later.

[00:02:31]
So it's a little bit more flexible to if I don't want it to be exactly bound to this title and rating. That's just a choice. You can do it either way. I just wanted to show you that you don't necessarily have to do it that way. And if we look at our methods, we've got this sort lowest it's this .ratings info .sort and then we're using sort to kind of look and compare and say, okay, is it higher or is it lower and output that to the page.

[00:03:00]
So here we'll go back to the code pen here. Just so you can see it all in one place. In our app, we have all of this ratings information. We've got our 2 columns of title and rating. And then we've got our methods sort lowest and sort highest in just kind of a one liner.

[00:03:22]
I wanna mention too, because the this dot binding is really important. We wanna establish a relationship with these properties in this. We can't use an arrow function here, on the method because that would not create that binding. We can use an arrow function once we're inside of that method, but it would lose the this dot binding if we started to use an arrow function at this top level.

[00:03:52]
So we're gonna say sort lowest this dot ratings info and then we're sorting based on the rating based on .rating here and then if we look over here we sort titles by sort, lowest, sort highest. We loop through key and columns, entry and ratings info and then that outputs to the page.