Coding

FILTERS | VueJS | Learning the Basics

  • 00:00:01 welcome to a new video about view chairs
  • 00:00:04 – in this video we're going to have a
  • 00:00:06 look at how we can transform the data we
  • 00:00:08 output in our template directly in the
  • 00:00:12 template with filters for example if you
  • 00:00:15 have some string which is all lowercase
  • 00:00:17 and you want to output it as uppercase
  • 00:00:20 we're going to build this example in
  • 00:00:22 this video so I am back here in jsfiddle
  • 00:00:25 a tiny little editor in the web you can
  • 00:00:29 use for simple projects or for playing
  • 00:00:31 around with JavaScript HTML and CSS only
  • 00:00:33 projects and all I did here is sort of a
  • 00:00:36 basic view chairs to set up where I
  • 00:00:38 import view chairs here work from the
  • 00:00:40 CDN and then my app Dave here which I
  • 00:00:44 take control over with my view instance
  • 00:00:46 down there and then I get a title but oh
  • 00:00:48 the tile is all lowercase now what if I
  • 00:00:52 wanted to output it uppercase well
  • 00:00:55 option number one we already learned
  • 00:00:58 about computer properties if you
  • 00:01:00 followed all the view videos on this
  • 00:01:02 channel I do have one about computed
  • 00:01:04 properties there we could set up a
  • 00:01:06 computed property which the end of
  • 00:01:08 course is a function as you learned
  • 00:01:09 there and we could name it that title
  • 00:01:12 just to have a different name and as I
  • 00:01:15 said this is a function and in their
  • 00:01:18 return this title to uppercase to
  • 00:01:22 uppercase is a built-in JavaScript
  • 00:01:24 function we have available in JavaScript
  • 00:01:26 and then output that title here in the
  • 00:01:28 template hit ctrl enter we see hello
  • 00:01:30 world in all uppercase and that's a
  • 00:01:32 perfectly valid method this is using a
  • 00:01:35 computed property and taking advantage
  • 00:01:36 of the fact that you chess will
  • 00:01:38 automatically recalculate this whenever
  • 00:01:40 we change the title but there's also a
  • 00:01:43 different way of doing this because
  • 00:01:45 imagine we do have a couple of strings
  • 00:01:47 which are lower case in which we
  • 00:01:49 eventually want to turn into upper case
  • 00:01:51 strings well the problem we do have of
  • 00:01:53 this solutions that we would have to
  • 00:01:54 create a computer property for each our
  • 00:01:57 data field we want to transform so if we
  • 00:01:59 not only had the title but also the
  • 00:02:02 message here which is something well
  • 00:02:04 then we would have to create and you
  • 00:02:05 compute a property for this message and
  • 00:02:08 that quickly is not something you want
  • 00:02:10 to do so instead we can use a filter
  • 00:02:13 filters are simply little helpers you
  • 00:02:16 can use in view chess and you would have
  • 00:02:18 to create this on your own because there
  • 00:02:20 is no built-in filter there's only the
  • 00:02:22 capability to build your own filters now
  • 00:02:25 how do you build a filter well you do it
  • 00:02:27 by accessing the global view object the
  • 00:02:30 one we're instantiating here you don't
  • 00:02:32 have to instantiate it it also has some
  • 00:02:34 static functions if you will and there
  • 00:02:37 we can access filter now this allows us
  • 00:02:40 to set up a global filter which means
  • 00:02:42 one which is application wide available
  • 00:02:45 the alternative would be to set up
  • 00:02:48 filters object here in the view instance
  • 00:02:51 to create local filters which are only
  • 00:02:54 available in this view instance now it
  • 00:02:57 doesn't matter in this example here but
  • 00:02:59 it'll start with a global one and I'll
  • 00:03:01 name it upper case this is the name we
  • 00:03:04 will later on use to work with it and
  • 00:03:06 this method then also takes a second
  • 00:03:09 function or argument I should say which
  • 00:03:11 is a function this function will be
  • 00:03:13 executed by vue.js whenever this filter
  • 00:03:16 is applied to something and we will
  • 00:03:18 apply it in a second this function will
  • 00:03:20 automatically receive one input one
  • 00:03:23 argument and that's the value view j/s
  • 00:03:26 will pass this value to this function
  • 00:03:28 automatically and this of course will be
  • 00:03:31 the value on which we apply this filter
  • 00:03:33 later on so any what we then have to do
  • 00:03:36 is we have to return the filtered which
  • 00:03:39 means transformed value and there I
  • 00:03:41 could therefore simply return value to
  • 00:03:44 upper case the same as down there in the
  • 00:03:48 computed property but now in this filter
  • 00:03:51 now what's the idea behind this filter
  • 00:03:53 what's the advantage well since we
  • 00:03:56 created it here gave it a name of upper
  • 00:03:58 case I can go into my template and pick
  • 00:04:02 the original title here and simply add
  • 00:04:05 the filter by adding a pipe symbol and
  • 00:04:07 then the name of the filter upper case
  • 00:04:09 the name we picked here without the
  • 00:04:11 quotation marks though if I now hit
  • 00:04:14 control enter again well we see the same
  • 00:04:16 result but now not using the computed
  • 00:04:18 property but instead defaulter now only
  • 00:04:21 to highlight this in the local setup
  • 00:04:24 here we can also add filters here by add
  • 00:04:27 them with the name first so if you want
  • 00:04:30 to create a lowercase folder we would
  • 00:04:32 give this property a name of lowercase
  • 00:04:33 and that would also be a function which
  • 00:04:36 gets the value just like in the filter
  • 00:04:38 above which we defined globally and then
  • 00:04:41 we could then return value to lowercase
  • 00:04:44 never built in JavaScript function now
  • 00:04:47 what this allows me is to even chain
  • 00:04:49 this to the other folder by adding an
  • 00:04:51 average height and now lowercase
  • 00:04:53 referring to that folder we register
  • 00:04:55 here locally which is therefore only
  • 00:04:57 available in its instance and now that
  • 00:05:00 control enter well it's lower case
  • 00:05:02 because what happens here is we're
  • 00:05:04 chaining filters which means we're first
  • 00:05:07 executing the upper case folder on title
  • 00:05:09 and then we're executing lower case
  • 00:05:11 folder on the result of upper case on
  • 00:05:14 title so on this part and this gives us
  • 00:05:17 this newly filtered value and the great
  • 00:05:20 advantage of folders of course is that
  • 00:05:22 we can now apply this to any value we
  • 00:05:25 want to output so also to the message
  • 00:05:27 which I could not also transform to
  • 00:05:29 uppercase like this hit ctrl enter and
  • 00:05:31 here it is something these are filters
  • 00:05:35 in view chairs again there are no
  • 00:05:37 built-in ones but you're totally free
  • 00:05:40 and imagining what you want to build
  • 00:05:42 with filters and you do build them like
  • 00:05:44 this evilly finding globally here with
  • 00:05:47 view filter name and then the function
  • 00:05:50 which holds the logic or globally in the
  • 00:05:53 filters object which holds key value
  • 00:05:55 pairs where the key is the name of the
  • 00:05:57 filter and the value is the function one
  • 00:05:59 important note though you always want to
  • 00:06:02 use a computed property if you can now
  • 00:06:05 here it's clearly impractical because
  • 00:06:06 you might have multiple messages or
  • 00:06:08 strings you want to transform but if it
  • 00:06:10 is less impractical use a computer
  • 00:06:13 property because computer properties
  • 00:06:14 offer you better performance because
  • 00:06:17 vue.js is able to analyze on what this
  • 00:06:20 computer property depends and whether
  • 00:06:22 therefore needs to recalculate it well
  • 00:06:25 of that I hope the basics about folders
  • 00:06:27 are set and you are now in the position
  • 00:06:29 to transform your output in the way you
  • 00:06:32 want to transform it