在Vue JS中,从vue实例内的方法调用过滤器

Question

假设我有一个像这样的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>

但是如何在实例方法或计算属性中使用此过滤器？(显然这个例子很简单,我的实际过滤器更复杂).

Answer 1

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

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

Answer 2

如果你的过滤器是这样的

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

这就是答案

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

Answer 3

这就是对我有用的

1. 定义过滤器

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

2. 使用过滤器

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

Answer 4

您可以创建一个vuex类似的辅助函数来将全局注册的过滤器映射到 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;
    }, {});
}

用法：

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

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