From the course: Vue.js 2 Essential Training
Creating filters
- [Instructor] We've already seen that we can create methods and computer properties, but there's another way to process data in Vue.JS, and that is through filters. They're pretty handy. So, the problem I'm having right now is that these prices come directly from the database, and it's not always consistent about the number formatting. So here we just have $99, but if we scroll, we'll see that sometimes we'll have two digits for the format, and on certain items, that are really cheap, you only have like one digit right here. So, it's not really consistent. Let's create a filter that makes the formatting of the numbers a little bit better. So to do that, what I'll do is I'll break into the JavaScript, and just like I typed in computer properties and methods, I can add another section here called filters. And just like with the other ones, that is an object and then, let's go and hide the preview so that it doesn't keep on reloading. And, what I'll do, is I'll create a filter called currency that I can use all over the place and this is going to be a function. Filters can accept parameters, so I'm going to pass in a value to this filter. And then, I will use the return statement to go ahead and type in a dollar sign. And plus, we'll use the number method, and then use another JavaScript method called parseFloat(value) and then use toFixed with two units right here. So what this will do, is it'll format the numbers so that they have two decimal points. And I misspelled function here. So that looks good. Now that I have that filter, I can use it in my application. So let's go ahead and go back into the HTML and right now I have this dollar sign right here. And I'm using this number function, so what I could do here is list the element that I want to be modified by the filter and type in a pipe character, that's a vertical line. On my keyboard, it's above the Return Key. And then after that, I can type in the name of the filter. So I'll say currency. And let's go ahead and open this up. And you should see that all my numbers are formatted properly now. A couple of things that you should know about filters, they can be also defined outside the main Vue object. And this is actually also true for methods. So if I want to create a filter that's going to apply to more than one Vue component, or element on the page, I can just type in Vue.filter, or Vue.component, and then type in the name of the filter that I want to use, and then put in my function just like I would for whatever method. So I can use this in multiple Vue instances not just in this one right here. But, the one that I have works pretty well. A couple of other things that you should know, is that they can also be chained. So if I'm calling in my HTML currency, then I can do something else, just hit another pipe, then type in another name of another filter here and it will process the currency first, and then it'll pass the result of that to whatever this other filter is. Filters are also available in both mustache expressions like this, as well as in any v-bind directives. So we could use it, for example, to modify this source or the alt right here. Filters are pretty useful, and in the same way that we can create global filters, we can also create global components.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.