2

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?

1

1 Resposta 1

4

Na sessão sobre filtros da documentação fala sobre isso. Mais especificamente na parte que diz:

Filters are usable in two places: mustache interpolations and v-bind expressions.

Então a solução seria usar mustache mesmo.

Na documentação do v-text é mencionado:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

Então seria só usar a interpolação. A não ser que você tenha algum motivo para usar v-text ao invés da interpolação.

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>{{ name | hello }}</span>
</div>

6
  • Onde é o botão para reagir com "sad". Triste o Vue não ter isso, mas obrigado pela informação. Commented 25/10/2018 às 19:37
  • Curiosidade: mustache seria a sintaxe de interpolação? O {{ }}? Commented 25/10/2018 às 19:37
  • 1
    Sim... por algum motivo os gringos apelidaram os {{ }} de mustache porque saporra parecem bigodes. :D Commented 25/10/2018 às 19:39
  • Mas cara, não vejo motivo para não usar a interpolação. Também não vejo motivos para o core do vue não aplicar filtros no attr também. hahaha Commented 25/10/2018 às 19:39
  • Eu gosto de usar o v-text para não correr o risco do usuário ver o {{ }} e também porque é chato ficar definindo isso no Laravel, kkkkk Commented 25/10/2018 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .