152

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).

Improve this question

7 Answers 7

Reset to default
306 
this.$options.filters.capitalize(this.word);

See http://vuejs.org/api/#vm-options

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This isn't working for me in a Nuxt context. this.$options doesn't have a filters property.
In NuxtJS use this.$root.$options.filters
41

This is what worked for me

  1. 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 || '...' : '')
});

  2. Using filter

    import Vue from 'vue'
let text = Vue.filter('truncate')(sometextToTruncate, 18);
Improve this answer

1 Comment

The flaw in this answer is relying on import Vue from 'vue' and creating a new variable when one already exists.
22

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')
Improve this answer

Comments

7

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'])
    }
}
Improve this answer

1 Comment

This is bad use of the reduce method. It could be better done with a combination of map and Object.entries.
3

Try:

this.$options.filters.capitalize
Improve this answer

1 Comment

How does this add anything to the accepted answer posted 7 years prior?
1

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, '.')
})
Improve this answer

2 Comments

It's never a good idea to declare things in a global scope, which windows.Vue and windows.moment does, unless you absolutely have to, without any other way.
Not true at all for this topics! Globally defined filters per a project is a good rule !
0

In vue3 you need to load your filters according to the documentation then access them in a computed property or method like this:

this.$filters.myFilterName(params)
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.