[SOLVED] Vue "filters" option not working

n.taddei

Hi everyone!
I have a problem with my Quasar application.
If I want to use filters, I can not specify filters object in constructor options, but I necessarily have to register them one by one using “filter” API.
In the first case the “filters” option is ignored and my filter isn’t retrieved inside the component, giving the following Vue warn: Failed to resolve filter: myFilter

This code works:

...

Vue.use(Quasar) // Install Quasar Framework

Vue.filter('myDateFilter', (value) => {
  return value ? moment(value).format('DD-MM-YYYY Z') : ''
})

Quasar.start(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#q-app',
    router,
    store,
    render: h => h(require('./App'))
  })
})

This one, instead, does not work and be ignored by Vue:

...

Vue.use(Quasar) // Install Quasar Framework

Quasar.start(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#q-app',
    router,
    store,
    filters: {
      myDateFilter: function (value) {
        return value ? moment(value).format('DD-MM-YYYY Z') : ''
      }
    },
    render: h => h(require('./App'))
  })
})

In both cases I try to use filter in my component like:

{{ company.contractDate | myDateFilter }}

Any suggestions? Thanks for reply.

Niccolò

rstoenescu

According to Vue documentation, in the second case you are registering a filter for App.vue component only. Same applies for components and directives declared inside the exports of a component / single *.vue file. Best way to do this is to write a file with all your filters (using named ES6 exports) and then import and register the filter in whatever component you need it.

n.taddei

Thank you very much! You’re really great!
I’m still new in Vue environment and some behaviors are strange to me, but now I understood completely this problem.
Really appreciate this!

n.taddei

@rstoenescu Is there any way/trick to make filters “global”? I mean like register once and use everywere without importing them every time I want to use them. And without declaring them one by one using Vue APIs.

s.molinari

Check this out.

https://vuejs.org/v2/guide/syntax.html#Filters

Towards the bottom, it shows

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

I believe what you were trying with the Vue.filter() method was from version 1 of Vue.

This bit of the migration guide might be also quite interesting. You’ll notice filters have been knocked down several notches in preference of the other methodologies within Vue.

Scott

n.taddei

@s.molinari Hi, thank you, but you didn’t get the point.
Using API Vue.filter(...) it correctly register a global filter, usable by every component of my app.
Using filters: {...} option it doesn’t work instead, because, as @rstonescu said, it works only for App.vue component, but no one else component is able to use them.

So I wondering if there’s a way to provide filters for every component, something like “include once use everywhere”

rstoenescu

You got two options:

Declarefilters: {...} inside any Vue component and that Vue component’s scope will have the filter
Vue.filter(…) will solve the “include once use everywhere” scenario.

n.taddei

Thank you! I close this, see you at my next doubt

No More Posting New Topics!

[SOLVED] Vue "filters" option not working