javascript - Access vue instance/data inside filter method

Question

I'm trying to access vue instance data inside filter function like this. JS:-

new Vue({
 data:{
  amount: 10,
  exchangeRate:50
 },
 el:"#app",
 filters:{
   currency: function(amount){
             console.log(this);
             //return amount * this.exchangeRate;
            return amount *50;

   }
 }
})

HTML:

<div id="app">
 {{ amount | currency}}
</div>

My goal is to use return amount * this.exchangeRate; but this is equal to window here. How can I do this ? Thanks. jsfiddle

Answer 1

According to Evan, the creator of Vue:

Use methods primarily for triggering state alterations. When you call a method, it generally implies some side effect.

Use filters primarily for simple text formatting that needs to be reused all across your app. Filters should be pure - no side effects, just data in and data out.

Use computed properties for local, component-specific data transforms. Similar to filters, computed getters should be pure.

There is a special case where you want to compute something using a scope variable that is only available in the template (e.g. a v-for alias), in such cases it's okay to use "helper methods" so that you can compute something by passing it arguments.

(source: https://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2)

So, since the filter depends on the component, I think you should use a computed property in this case instead of a filter.