Call a global filter from a method in Vue.js

Question

I have a global filter I am using from here: https://www.npmjs.com/package/@vuejs-community/vue-filter-date-format to format a date that I can call from the html like so:

{{new Date(VALUE) | dateFormat('MMM. DD, YYYY', dateFormatConfig)}}

I am trying to call this from a method. This is how Vuejs says to call it.

this.$options.filters.FILTERNAME(VALUE)

But I do not know how to make this work. This does not work because there is no VALUE

this.$options.filters.dateFormat('MMM. DD, YYYY', dateFormatConfig)

I have also tried this:

this.$options.filters.dateFormat('MMM. DD, YYYY', VALUE)

and this:

this.$options.filters.dateFormat(VALUE, 'MMM. DD, YYYY')

and this:

this.$options.filters.dateFormat('MMM. DD, YYYY', dateFormatConfig)(VALUE)

None of these work. Does anyone know how to call this properly from a method?

UPDATE:

Turns out this does work:

this.$options.filters.dateFormat(VALUE, 'MMM. DD, YYYY')

I needed to convert the VALUE to this: new Date(VALUE)

So the end result is:

this.$options.filters.dateFormat(new Date(VALUE), 'MMM. DD, YYYY')

Answer 1

I think there is a problem with your filter registration.In your index.js(main app file), you should import as import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'; and then Vue.use(VueFilterDateFormat); or you can register it locally in some components. Then you will be able to use it as the basic usage indicates [ here ]