Filters in Vue only work with interpolation, do not work with v-text. Because?

Question

Navigation

#1 by (4 votes)

2

I know that to use a filter in Vue , you can make the call as follows:

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><divid="app">

    {{ name | hello }}
</div>

That is, through interpolation, it is possible to call a filter perfectly.

The problem is when I try to use v-text . It seems that Vue behaves differently in these cases.

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><divid="app">

    <span v-text="name | hello"></span>
</div>

Note that when you run, an error appears:

hello is not defined

In this case, I come from AngularJS and I know that it is possible to use filters with both ng-bind and interpolation.

But what about Vue ? Why does not it work?

I did not see any details in the documentation regarding this.

Is there any way to circumvent this problem?

javascript vue.js

asked by anonymous 25.10.2018 / 21:15

1 answer

score 4 · Accepted Answer

In the session about documentation filters talks about this. More specifically in the part that says:

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

So the solution would be to use mustache yourself.

At v-text documentation is mentioned:

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

Then you would just use interpolation. Unless you have some reason to use v-text instead of interpolation.

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><divid="app">
    <span>{{ name | hello }}</span>
</div>