Eu sei que para usar um filtro no Vue
, você pode fazer a chamada da seguinte forma:
Vue.filter('hello', function (input) {
return "hello, " + input;
})
new Vue({
el: "#app",
data: {
name: "Wallace",
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
{{ name | hello }}
</div>
Ou seja, através da interpolação, é possível chamar um filter
perfeitamente.
O problema é quando tento usar o v-text
. Parece que o Vue se comporta diferente nesses casos.
Vue.filter('hello', function (input) {
return "hello, " + input;
})
new Vue({
el: "#app",
data: {
name: "Wallace",
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<span v-text="name | hello"></span>
</div>
Notem que ao executar, aparece um erro:
hello
is not defined
No caso, eu venho do AngularJS e sei que é possível usar os filters
tanto com ng-bind
como com interpolação.
Mas e no caso do Vue
? Por que não funciona?
Não vi nenhum detalhe na documentação a respeito disso.
Existe alguma forma de driblar esse problema?