Vue Global Filter выдает ошибку со значением undefined

Question

Я пытаюсь отформатировать деньги. Для этого я использую глобальный фильтр следующим образом:

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/

Answer 1

Вы используете неверное имя аргумента (value) в своем глобальном фильтре.
Это должно быть val:

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