我正在尝试像这样访问过滤器函数中的 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这里。我怎样才能做到这一点 ？谢谢。
提琴手
据 Vue 的创造者 Evan 所说：
主要使用方法来触发状态更改。当你调用一个方法时，它通常意味着一些副作用。
过滤器主要用于需要在整个应用程序中重复使用的简单文本格式。过滤器应该是纯的——没有副作用，只有数据输入和数据输出。
将计算属性用于本地、特定于组件的数据转换。与过滤器类似，计算得到的 getter 应该是纯的。
有一种特殊情况，您想使用仅在模板中可用的范围变量（例如 v-for 别名）来计算某些内容，在这种情况下，可以使用“辅助方法”，以便您可以通过传递来计算某些内容它的论据。
（来源：https : //forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/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>我看到你有两个选项，要么使用方法/计算属性，要么传递额外的参数来过滤。你不能访问this内部过滤器，作为过滤的目的是像文本转换等。从简单的文档：
过滤器主要用于文本转换目的。对于其他指令中更复杂的数据转换，您应该改用 Computed 属性。