Sometimes, we want to access a Vue.js component instance or data inside filter method.

In this article, we’ll look at how to access a Vue.js component instance or data inside filter method.

How to access a Vue.js component instance or data inside filter method?

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.

For instance, we write

<template>
  <div id="app">
    {{ amount | currency(exchangeRate) }}
  </div>
</template>

<script>
//...
export default {
  //...
  filters: {
    currency(amount, exchange) {
      return amount * exchange;
    },
  },
  //...
};
</script>

to set amount as the value of the amount parameter of the currency filter and exchangeRate as the value of the exchange parameter with

{{ amount | currency(exchangeRate) }}

Then we return the 2 values multiplied together and return it so the product will be rendered in the template.

Conclusion

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.