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

时间:2017-03-16 08:21:00

标签: javascript vue.js vuejs2

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

4 个答案:

答案 0 :(得分:17)

Vue的创造者Evan说:

  

主要使用方法触发状态更改。调用方法时,通常会产生一些副作用。

     

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

     

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

     

有一种特殊情况,您希望使用仅在模板中可用的范围变量(例如v-for别名)来计算某些内容,在这种情况下,可以使用&#34; helper方法&#34;这样你就可以通过传递参数来计算某些东西。

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

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

答案 1 :(得分:3)

我看到你有两个选项,要么使用方法/计算属性,要么传递额外的参数来过滤。您无法访问内部过滤器中的this,因为过滤的目的很简单,例如来自docs的文字转换等:

  

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

答案 2 :(得分:3)

赞:

body: JSON.stringify({
  inputText: this.state.fields.message
})
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;

   }
 }
})

答案 3 :(得分:-1)

我遇到了这个问题,发现的一种快捷简便的方法是在函数上方执行此操作:

let self = this

然后我可以打电话给self.<name of data property or function>