javascript - Vue全局过滤器抛出未定义值的错误
问题描述
我正在尝试格式化货币。为此,我使用这样的全局过滤器:
Vue.filter('formatMoney', (val) => {
if (!value) return ''
val = val.toString()
return val.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})
new Vue({
el: '#app',
data: {
price: 1000
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<p>{{ price | formatMoney }}</p>
</div>
但是,我收到此错误value undefined
!但令人惊讶的是,它适用于本地过滤器:
new Vue({
el: '#app',
data: {
price: 1000
},
filters: {
formatMoney(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<p>{{ price | formatMoney }}</p>
</div>
如何使这个全局过滤器工作?
JSFiddle:http: //jsfiddle.net/ahutL91m/4/
解决方案
您在全局过滤器中使用了错误的参数名称 ( value
)。
它应该是val
:
Vue.filter('formatMoney', (val) => {
if (!val) return ''; // <--- value -> val
val = val.toString()
return val.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})
推荐阅读
- yocto - zc702 没有启动我的 yocto 创建的构建
- java - 休眠/弹簧。如何覆盖hibernate的默认SQLExceptionConverter?
- android - 使用 Android 虚拟设备 (AVD) 时无法在 Android Studio 中运行 Flutter 项目
- python - 为 Pyinstaller 使用自定义终端
- node.js - 如何在 Neo4j 中运行批量事务
- react-native - 通过 channel_id 选择 HMS 推送通知通道不起作用
- c++ - 我的搜索功能 C++ 有问题
- javascript - 将我获取的数据传递给我的插入函数
- wordpress - 无法在 WordPress 中安装插件或更新
- linux - 在linux中水平排序