javascript - Vue custom filter does not work when defined globally -

so here jsfiddle example:

html:

<div id="demo">   not show $ sign in input in second input - why? <br>   <!-- diff filter defined diferently -->       <input type="text" v-model="a | currencydisplay">   <span >model value: {{a }}</span> </div> 

js:

vue.filter('currencydisplay', {   currencydisplay: {     // model -> view     // formats value when updating input element.     read: function(val) {       console.log('filter red');       return '$'+val.tofixed(2)     },     // view -> model     // formats value when updating data.     write: function(val, oldval) {       console.log('filter write');        var number = +val.replace(/[^\d.]/g, '')       return isnan(number) ? 0 : number     }   } })  var demo = new vue({   el: '#demo',   data: {     a: 5   } }) 

when in source of documentation example, put code works:

new vue({   el: '#two-way-filter-demo',   data: {     money: 123.45   },   filters: {     currencydisplay: {       read: function(val) {         return '$'+val.tofixed(2)       },       write: function(val, oldval) {         var number = +val.replace(/[^\d.]/g, '')         return isnan(number) ? 0 : number       }     }   } }) 

so difference way how filter defined. has work both ways according documentation. wrong here?

http://jsfiddle.net/ymv7y/975/

you should remove currencydisplay key global filter:

vue.filter('currencydisplay', {   read: function (val) {     return '$' + val.tofixed(2)   },   write: function (val, oldval) {     var number = +val.replace(/[^\d.]/g, '')     return isnan(number) ? 0 : number   } })