Vue JS 2 Tutorial #36 - Custom Search Filter

hey what's going on gang welcome to your 36 wjs tutorial and in this video i'm going to show you how to create a custom search filter okay then so we've seen how to use filters to change the display of data in a browser such as these to obligate and snippet we learned that in the last tutorial so wouldn't it be cool if we could use such a filter to change the output of these blogs right here for example it would be nice if we could have a search box at the top research in that search box and then it filters out any blogs which do not contain that search item alright so some kind of custom search filter so it would be nice if we could just come over here and say okay blogs this is the array of blogs let's add a filter to this called I don't know search and then we'll create that filter so that it only returns to us the blogs with a specific search term yeah that would be good but vue.js doesn't really like this anymore it's a very bad for performance and it suggests instead to create custom search filters using not a filter but instead a computed property so I'm going to show you how to do this exactly the same using a computed property and it's really quite simple so first of all we need to add some kind of search field so that when you use inputs into it we can search for that term okay so let's come underneath the h1 and add in an input which is going to have a type equal to text and then we want to attach a V model to this so we can store what's being typed into this and we'll call this its search and we'll also add a placeholder and give this a value equal to certain blocks okay okay cool so those are important now we need to define this property down here on the object so underneath blogs will say search and currently let us start off as an empty string okay so if we save this now we're going to see this search box up here at the top but when we type in nothing happens yet so we want to add that for Nancy lamb so how are we going to do this well we're going to use a computed property okay so let's come down here and create a new computed property it will say down down compute it and this is going to be an object and the computed property is going to be called filtered blogs okay so it's going to take our current blogs there which we retrieve right there and it's going to filter them okay so this is a function and inside this function what we want to do is return the filtered blogs so what we're going to do is return and it's going to be an array and we're going to take the current blocks which is an array so this top blogs and then we're going to apply the filter method to them okay and each time around this takes a blog the single item in the array so I'll explain this properly in a minute so now I'm just going to take that we're going to use a fat oral function okay and then inside this function what we're going to do is return either true or false so I'll just say return boolean there right just so we know this has to be true or false now let me explain this this filtered blogs property what we're going to do eventually is replace blogs with filtered blogs okay and that filtered blogs is going to be some kind of updating array based on the search term alright so if a certain user searches for for example this word right here then every blog with that in its title is going to be remaining in a blog but every blog without that in the title is going to kind of be filtered out with the blog okay does that make sense so what we're going to do is eventually cycle through filters blogs and not just blogs so this thing down here we're returning and updated array okay this return statement here is returning an array this is going to be an array all it is is the current blog array with some stuff filtered out of it that's what the filter function does okay so it cycles through the array of same as ten things in it each time around it's going to perform this little function right here for each item and we get the item that individual item is the blog right and then inside here we're going to return true or false for each blog so if we return true then that Blagh stays in the array if we return false that blog is removed from the array so we want to return a boolean and to do that we need to determine whether the search term is in at the blog or it's not because if it's in the blog then we're going to return true so it remains in the array if it's not in the blog we're going to return false so it's filtered out of the array okay so what we're going to do is return blog that's the current blog right there and we want the title property to check whether that search term is in it okay and then what we're going to do is use match right there to see if it's got a particular term in it and the term we're looking for is this dot search okay which is this thing right here search so when a user type something into this it's going to update the search variable the search property okay so see that's like ABC or whatever it updates to ABC then when it filters through the blog's we're going to look at each blog in the title property and this match function function is going to check whether that ABC this search is in the title of the blog if it is then it's going to return true and it's going to remain in the array if it's not it's going to return false and it's going to take it out of the array make sense okay so now we've done that we've got this property now called filtered blogs which we can then output here instead of blogs okay so this time it's going to cycle through filter blocks now to begin with filtered blogs is just going to be and the blog's basic liquors we're just looking for an empty string and everything has got an empty string in it okay so let's save it and view in a browser so to begin with everything there if we start to add this word Oh see see a/e okay they're both going in so that's why both of them have been returned delete that let's try this one cue you I and all of these must have qu I in the title yeah cool so that is how we create a custom search filter in UGS using computed properties not filters

Channel: The Net Ninja

Views: 138,378

Keywords: vuejs, vue js, vue js tutorial, vuejs tutorial, vue js 2, vue js 2 tutorial, vue js tutorial for beginners, vujs tutorial for beginners, vue js 2 tutorial for beginners, vuejs 2 tutorial, vue js search, vue js search filter, vue js custom search, vue js custom search filter, search filter, custom search filter, custom search, vue search, vue j2 2 search filter, vue js 2 custom search, computed search filter, computed search, vue computed search, vue js computed search

Id: G34_yNV8FMY

Length: 6min 30sec (390 seconds)

Published: Sun May 21 2017