在 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>

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

81799 次浏览
小开 
this.$options.filters.capitalize(this.word);

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

小开

为了补充莫里斯的回答，这是一个文件的例子，我通常用来把过滤器里面，你可以在任何视图中使用这种方法。

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

我就是这么做的

  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. Using filter

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

您可以创建一个类似于 vuex的 helper 函数来将全局注册的过滤器映射到 vue 组件的 method 对象:

// 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'])
}
}
小开

如果你的过滤器是这样的

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

这就是答案

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

试试:

this.$options.filters.capitalize

提交答案