В Vue JS вызовите фильтр из метода внутри экземпляра vue

Скажем, у меня есть экземпляр Vue:

new Vue({
    el: '#app',

    data: {
        word: 'foo',
    },

    filters: {
       capitalize: function(text) {
           return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
       }
    },

    methods: {
        sendData: function() {
            var payload = this.$filters.capitalize(this.word); // how?
        }
    }
}

Я могу легко использовать фильтр в шаблоне следующим образом:

<span>The word is {{ word | capitalize }}</span>

Но как я могу использовать этот фильтр из метода экземпляра или вычислимого свойства? (Очевидно, этот пример тривиален, и мои фактические фильтры более сложны).

Ответ 1

this.$options.filters.capitalize(this.word);

См. http://vuejs.org/api/#vm-options

Ответ 2

Чтобы дополнить ответ Морриса, это пример файла, который я обычно использую для размещения фильтров внутри, вы можете использовать его в любом представлении с помощью этого метода.

var Vue = window.Vue
var moment = window.moment

Vue.filter('fecha', value => {
  return moment.utc(value).local().format('DD MMM YY h:mm A')
})

Vue.filter('ago', value => {
  return moment.utc(value).local().fromNow()
})

Vue.filter('number', value => {
  const val = (value / 1).toFixed(2).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})
Vue.filter('size', value => {
  const val = (value / 1).toFixed(0).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})