[Vuejs]-Vue.js how to implement custom filter before API variable is defined

by

0👍

✅

Give it a default value:

return typeof val == 'undefined' ? 0 : val.toFixed(0)

The warning is not from the filter but is from <p> {{ foo.bar.num }} </p>. The way to solve that would be to define:

data() {
  return {
    foo:{bar:{num:0}}}
  }
}

in your component. This can be overkill, and sometimes you don’t know the structure of the object already. Anyway, the warning only shows when Vue.config.debug is true, so it should go away in production.

0👍

Did’nt test this but did you tried one of the lifecycle hooks?

Keep

<p> {{ foo.bar.num }} </p>

And do 

var Foo = new Vue({
    // el and data and stuff
    ready: function () {
       this.$options.filters.myFilter(this.foo.bar.num);
    }
});

Another approach might be the computed option: http://vuejs.org/api/#computed

Leave a comment