Trong Vue JS, gọi một bộ lọc từ một phương thức bên trong thể hiện vue

Question 1

Giả sử tôi có một phiên bản Vue như vậy:

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?
        }
    }
}

Tôi có thể dễ dàng sử dụng bộ lọc trong một mẫu như vậy:

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

Nhưng làm cách nào tôi có thể sử dụng bộ lọc này từ bên trong một phương thức phiên bản hoặc thuộc tính được tính toán? (Rõ ràng ví dụ này là tầm thường và các bộ lọc thực tế của tôi phức tạp hơn).

Question 2

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

Xem http://vuejs.org/api/#vm-options

Question 3

Đây là những gì làm việc cho tôi

Xác định bộ lọc

//credit to @Bill Criswell for this filter
Vue.filter('truncate', function (text, stop, clamp) {
    return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
});

Sử dụng bộ lọc

import Vue from 'vue'
let text = Vue.filter('truncate')(sometextToTruncate, 18);

Question 4

Bạn có thể tạo một vuexhàm trợ giúp tương tự để ánh xạ các bộ lọc đã đăng ký toàn cầu vào đối tượng phương thức của thành phần vue:

// map-filters.js
export function mapFilters(filters) {
    return filters.reduce((result, filter) => {
        result[filter] = function(...args) {
            return this.$options.filters[filter](...args);
        };
        return result;
    }, {});
}

Sử dụng:

import { mapFilters } from './map-filters';

export default {
    methods: {
        ...mapFilters(['linebreak'])
    }
}

Question 5

nếu bộ lọc của bạn giống như thế này

<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>

đây là câu trả lời

this.$options.filters.plural('item', count, 'items')

Question 6

Để bổ sung cho câu trả lời của Morris, đây là ví dụ về tệp tôi thường sử dụng để đặt các bộ lọc bên trong, bạn có thể sử dụng trong bất kỳ chế độ xem nào bằng cách sử dụng phương pháp này.

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, '.')
})