javascript - How to apply a filter within a Vuejs component? -

if have simple filter, say:

vue.filter('foo', function (value) {     return value.replace(/foo/g, 'bar'); }); 

and simple component:

vue.component('example', {     props: {         msg: string,     }, }); 

and within markup:

<example inline-template :msg="my foo full of foo drinks!">     {{ msg }} </example> 

i can apply filter such:

<example inline-template :msg="my foo full of foo drinks!">     {{ msg | foo }} </example> 

i can apply filter within template, want move logic component.

it doesn't need filter, way create getter , setter data fields.

something like:

vue.component('example', {     props: {         msg: {             type: string,             getvalue: function(value) {                 return value.replace(/foo/g, 'bar');             },         }     }, }); 

it hidden , i'm not sure if documented, there github issue on how use filters in components.

to use getters , setters, computed properties perfect:

vue.component('example', {     props: {         msg: {             type: string,         }     },     computed: {         usemsg: {             get: function() {                 return this.$options.filters.foo(this.msg);             },             set: function(val) {                 // val here...                 this.msg = val;             },         },     } }); 

and corresponding markup:

<example inline-template :msg="my foo full of foo drinks!">     {{ usemsg }} </example>