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

Community · Accepted Answer · 2020-06-20 09:12:55Z

34

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 16, 2017 at 8:53

Potray

1,99817 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Armand Over a year ago

Hi @Potray, the link doesn't work anymore. Could you please explain (or direct) what Evan meant by saying "helper methods"?

RavatSinh Sisodiya · Accepted Answer · 2020-04-14 05:53:35Z

26

Like this:

new Vue({
 data:{
  amount: 10,
  exchangeRate:60
 },
 el:"#app",
 filters:{
   currency: function(amount, exchange){
             console.log(exchange);
             //return amount * this.exchangeRate; <- can't do, must pass it in
            return amount * exchange;

   }
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
 {{ amount | currency(exchangeRate)}}
</div>

edited Apr 14, 2020 at 5:53

RavatSinh Sisodiya

1,6161 gold badge21 silver badges42 bronze badges

answered Dec 11, 2018 at 15:36

exyzzy

3613 silver badges4 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 21:10:37Z

5

I see there are two options you have, either use a method/computed property or pass additional parameter to filter. You can not access this inside filter, as purpose of filter is simple like text transformation, etc. from the docs:

filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use Computed properties instead.

edited Jul 15, 2022 at 21:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 16, 2017 at 8:55

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

Access vue instance/data inside filter method

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related