Vue JS में, vue उदाहरण के अंदर एक विधि से फ़िल्टर को कॉल करें

Question 1

कहो मेरे पास एक 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>

लेकिन मैं इस फ़िल्टर का उपयोग आवृत्ति विधि या संगणित संपत्ति के भीतर से कैसे कर सकता हूं? (स्पष्ट रूप से यह उदाहरण तुच्छ है और मेरे वास्तविक फ़िल्टर अधिक जटिल हैं)।

Question 2

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

Http://vuejs.org/api/#vm-options देखें

Question 3

इसी से मेरा काम बना है

फ़िल्टर को परिभाषित करना

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

फ़िल्टर का उपयोग करना

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

Question 4

तुम एक vuexसहायक घटक के तरीके वस्तु में विश्व स्तर पर पंजीकृत फिल्टर नक्शा करने के लिए एक सहायक समारोह की तरह बना सकते हैं :

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

उपयोग:

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

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

Question 5

अगर आपका फ़िल्टर कुछ इस तरह है

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

यह उत्तर है

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

Question 6

मॉरिस उत्तर को पूरक करने के लिए, यह एक ऐसी फ़ाइल का एक उदाहरण है जिसे मैं आमतौर पर फ़िल्टर को अंदर डालने के लिए उपयोग करता हूं, आप इस पद्धति का उपयोग करके किसी भी दृश्य में उपयोग कर सकते हैं।

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