Filters in Vue only work with interpolation, they don’t work with v-text. Why?

Question

I know to use a filter on 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>

<div id="app">

    {{ name | hello }}
</div>

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

The problem is when I try to use the 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>

<div id="app">

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

Note that when running, an error appears:

hello is not defined

In this case, I come from Angularjs and know that it is possible to use the filters so much with ng-bind as with interpolation.

But in the case of Vue? Why doesn’t it work?

I saw no detail in the documentation regarding this.

Is there any way to circumvent this problem?

Answer 1

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

Filters are usable in two Places: mustache interpolations and v-bind Expressions.

Then the solution would be to use mustache even.

In the documentation of v-text is mentioned:

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

Then we’d 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>

<div id="app">
    <span>{{ name | hello }}</span>
</div>