访问过滤器方法中的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这里等于.我怎样才能做到这一点 ？谢谢. 的jsfiddle

Answer 1

根据Vue的创造者Evan的说法:

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

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

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

有一种特殊情况,你想使用只在模板中可用的范围变量来计算某些东西(例如v-for别名),在这种情况下,可以使用"辅助方法",这样你就可以通过传递来计算某些东西.它的论点.

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

因此,由于过滤器依赖于组件,我认为在这种情况下应该使用计算属性而不是过滤器.

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.5.17/vue.js"></script>
<div id="app">
 {{ amount | currency(exchangeRate)}}
</div>

Answer 3

我看到你有两个选项，要么使用方法/计算属性，要么传递额外的参数来过滤。你不能访问this内部过滤器，作为过滤的目的是像文本转换等。从简单的文档：

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