In Vue JS, call a filter from a method inside the vue instance
Javascriptvue.jsJavascript Problem Overview
Say I have a Vue instance like so:
new Vue({
el: '#app',
data: {
word: 'foo',
},
filters: {
capitalize: function(text) {
return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
}
},
methods: {
sendData: function() {
var payload = this.$filters.capitalize(this.word); // how?
}
}
}
I can easily use the filter in a template like so:
<span>The word is {{ word | capitalize }}</span>
But how can I use this filter from within an instance method or computed property? (Obviously this example is trivial and my actual filters are more complex).
Javascript Solutions
Solution 1 - Javascript
this.$options.filters.capitalize(this.word);
Solution 2 - Javascript
This is what worked for me
-
Defining filter
//credit to @Bill Criswell for this filter Vue.filter('truncate', function (text, stop, clamp) { return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '') });
-
Using filter
import Vue from 'vue' let text = Vue.filter('truncate')(sometextToTruncate, 18);
Solution 3 - Javascript
if your filter is something like this
<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>
this is the answer
this.$options.filters.plural('item', count, 'items')
Solution 4 - Javascript
You can create a vuex
like helper function to map globally registered filters into the methods object of a vue component:
// map-filters.js
export function mapFilters(filters) {
return filters.reduce((result, filter) => {
result[filter] = function(...args) {
return this.$options.filters[filter](...args);
};
return result;
}, {});
}
Usage:
import { mapFilters } from './map-filters';
export default {
methods: {
...mapFilters(['linebreak'])
}
}
Solution 5 - Javascript
To complement Morris answer, this is an example of a file I normally use to put filters inside, you can use in any view using this method.
var Vue = window.Vue
var moment = window.moment
Vue.filter('fecha', value => {
return moment.utc(value).local().format('DD MMM YY h:mm A')
})
Vue.filter('ago', value => {
return moment.utc(value).local().fromNow()
})
Vue.filter('number', value => {
const val = (value / 1).toFixed(2).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})
Vue.filter('size', value => {
const val = (value / 1).toFixed(0).replace('.', ',')
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})
Solution 6 - Javascript
Try:
this.$options.filters.capitalize