Как применить фильтр в компоненте Vuejs?

Question

Если у меня есть простой фильтр, скажем:

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

И простой компонент:

Vue.component('example', { 
    props: { 
     msg: String, 
    }, 
}); 

И в разметке:

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

я могу просто применить фильтр как таковой :

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

Я могу легко применить фильтр в шаблоне, однако я хочу переместить эту логику обратно в компонент.

Это не необходимо быть фильтром, но в основном способом создания геттера и сеттера для полей данных.

что-то вроде:

Vue.component('example', { 
    props: { 
     msg: { 
      type: String, 
      getValue: function(value) { 
       return value.replace(/foo/g, 'bar'); 
      }, 
     } 
    }, 
}); 

Answer 1

Немного скрыто, и я не уверен, если оно задокументировано, но есть Github issue on how to use filters in components.

Чтобы использовать методы получения и установки, computed properties совершенны:

Vue.component('example', { 
    props: { 
     msg: { 
      type: String, 
     } 
    }, 
    computed: { 
     useMsg: { 
      get: function() { 
       return this.$options.filters.foo(this.msg); 
      }, 
      set: function(val) { 
       // Do something with the val here... 
       this.msg = val; 
      }, 
     }, 
    } 
}); 

И соответствующая разметка:

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

Answer 2

Фильтр может иметь объем только компонент (такой же, как директив или переходов). вам необходимо зарегистрировать его на уровне компонентов. У вас есть довольно хороший пример в документах VueJS

var Child = Vue.extend({ /* ... */ }) 

var Parent = Vue.extend({ 
    template: '...', 
    components: { 
    // <my-component> will only be available in Parent's template 
    'my-component': Child 
    } 
}) 

Надеюсь, это поможет. Информацию можно найти по адресу: http://vuejs.org/guide/components.html#Local_Registration