Well we have taken a good few steps in our VueJs series and now it is high time we start looking at custom filters! Now this might have confusion from the previous series post about filtering v-for loops, that is with the filterBy custom property. This is about filters for properties/data we have in our app. Why natter when we can see: [js] Vue.filter('reverse',function(value,wordsOnly){ var seperator = ''; wordsOnly && (seperator = ' '); console.log(value); return value.split(seperator).reverse().join(seperator); }); new Vue({ el: '#filters', data : { message : 'here is our text' } }); [/js] The data property message is our text, which is: "here is our text". Now some html: [html] <div id="filters" class="container"> <h1>{{ message | reverse }}</h1> <br /> <pre>{{ $data | json }}</pre> </div> [/html] Well so far so good, let us see the output in a pen: [codepen_embed height=400 theme_id=1 slug_hash='WwVEXo' user='diquinnyonk' default_tab='result' animations='run'] See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen [/codepen_embed] So the key to all this is our new filter, which in this example is called reverse, you can set out filters in vue using the Vue global object and attaching it via the filter keyword. NB you can also attach filters in your Vue instance using the filter keyword like so: [js] new Vue({ el: '#filters', data : { message : 'here is our text' }, filters : { reverse : function(value,wordsOnly){ var seperator = ''; wordsOnly && (seperator = ' '); console.log(value); return value.split(seperator).reverse().join(seperator); } } }); [/js] The filter takes two properties, the name of the newly declared filter as a string. Then a function that can enact on the filter. The function takes the value first being passed in and then it is up to you how you wish to return the value. It must be returned for output purposes. For our example we have simply reversed all words and letters: [js] Vue.filter('reverse',function(value,wordsOnly){ var seperator = ''; wordsOnly && (seperator = ' '); console.log(value); return value.split(seperator).reverse().join(seperator); }); [/js] The wordsOnly property is a dynamic argument and is optional and this will ensure only the words are reversed, not the complete sentence. Let me show you what I mean: [html] <div id="filters" class="container"> <h1>{{ message | reverse true }}</h1> <p>Output will be: <strong>text our is here</strong></p> <br /> <pre>{{ $data | json }}</pre> </div> [/html]

Two way Filters

So that is a good basis of filters and hopefully you can see some of the benefits of using them. Well lets move onto the last part of this post, which is two way filters. It is also possible to define a filter that transforms the value before it is written back to the model from the view (input elements) here is a pen to show you: [codepen_embed height=400 theme_id=1 slug_hash='wGVqNg' user='diquinnyonk' default_tab='result' animations='run'] See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen [/codepen_embed] We now have a nice way of using filters to aid our VueJs knowledge, as you can see their is a lot of well thought out ideas in Vue and coming up you will see plenty more! thanks for stopping by.

Monthly Archives: May 2016

Vuejs – filters

This entry is part 7 of 7 in the series VueJs

This entry is part 7 of 7 in the series VueJsWell we have taken a good few steps in our VueJs series and now it is high time we start looking at custom filters! Now this might have confusion from the previous series post about filtering v-for loops, that is with the filterBy custom property.

Read more