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).
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);
import Vue from 'vue'
and creating a new variable when one already exists.
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')
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'])
}
}
reduce
method. It could be better done with a combination of map
and Object.entries
.
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, '.')
})
windows.Vue
and windows.moment
does, unless you absolutely have to, without any other way.
Try:
this.$options.filters.capitalize
Success story sharing
this.$options
doesn't have afilters
property.this.$root.$options.filters