[SOLVED] Vue "filters" option not working



  • 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ò


  • Admin

    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.



  • 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! :)



  • @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.



  • 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



  • @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” :)


  • Admin

    You got two options:

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


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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.