ভ্যু জেএস-এ, মান উদাহরণের অভ্যন্তরে কোনও পদ্ধতি থেকে একটি ফিল্টার কল করুন

Question 1

বলুন আমার এর মতো ভ্যূনু উদাহরণ রয়েছে:

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

মরিস উত্তরটির পরিপূরক করতে, এটি সাধারণত একটি ফিল্টার insideোকাতে আমি সাধারণত ব্যবহার করি এমন একটি ফাইলের উদাহরণ, আপনি এই পদ্ধতিটি ব্যবহার করে যে কোনও দৃষ্টিতে ব্যবহার করতে পারেন।

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