在过滤器方法中访问 vue 实例/数据

Question

我正在尝试像这样访问过滤器函数中的 vue 实例数据。 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>

我的目标是在这里使用 return amount * this.exchangeRate; 但是 this 等于 window 。我怎样才能做到这一点 ？谢谢。 小提琴手

原文由 Karan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 Vue 的创建者 Evan 的说法：

使用主要用于触发状态更改的方法。当你调用一个方法时，它通常意味着一些副作用。

过滤器主要用于需要在整个应用程序中重复使用的简单文本格式。过滤器应该是纯粹的——没有副作用，只有数据输入和数据输出。

使用计算属性进行本地的、特定于组件的数据转换。与过滤器类似，计算得到的 getter 应该是纯的。

有一种特殊情况，您希望使用仅在模板中可用的范围变量（例如 v-for 别名）来计算某些内容，在这种情况下，可以使用“辅助方法”以便您可以通过传递来计算某些内容它争论。

（来源： https ://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2）

因此，由于过滤器取决于组件，我认为在这种情况下您应该使用计算属性而不是过滤器。

原文由 Potray 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

像这样：

 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>

原文由 exyzzy 发布，翻译遵循 CC BY-SA 4.0 许可协议