Vue全局过滤器引发未定义值的错误

时间:2018-09-09 15:12:25

标签: javascript html vue.js filter

我正在尝试格式化货币。为此,我正在使用像这样的全局过滤器:

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/

1 个答案:

答案 0 :(得分:1)

您在全局过滤器中使用了错误的参数名称(value)。
应该是val

Vue.filter('formatMoney', (val) => {
  if (!val) return ''; // <--- value -> val
  val = val.toString()
  return val.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})