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

【问题标题】：Access vue instance/data inside filter method在过滤器方法中访问 vue 实例/数据
【发布时间】：2017-08-07 07:23:14
【问题描述】：

我正在尝试像这样访问过滤器函数中的 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。我怎样才能做到这一点？谢谢。 jsfiddle

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

像这样：

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>

【讨论】：

【解决方案2】：

我看到您有两个选项，要么使用方法/计算属性，要么将附加参数传递给过滤器。您无法在过滤器中访问this，因为过滤器的目的很简单，例如来自docs的文本转换等：

过滤器主要用于文本转换目的。对于其他指令中更复杂的数据转换，您应该改用计算属性。

【讨论】：

【解决方案3】：

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

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

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

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

有一种特殊情况，您想使用仅在模板中可用的范围变量（例如 v-for 别名）来计算某些东西，在这种情况下，可以使用“辅助方法”以便您可以计算传递参数。

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

所以，由于过滤器依赖于组件，我认为在这种情况下你应该使用计算属性而不是过滤器。

【讨论】：

嗨@Potray，该链接不再有效。您能否解释（或指导）埃文所说的“辅助方法”是什么意思？