Question

src/app.js看起来像：

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';

Vue.use(VueRouter);
Vue.use(VueResource);

const app = require("./app.vue");
const f = require('./filters');

const router = new VueRouter({
    routes: [
        {name: 'home', path: '/', component: home}
    ]
});

new Vue({
    router: router,
    filters: f,
    render: h => h(app)
}).$mount("#app");

src/filters/index.js看起来像：

module.exports = {
    season: (value) => {
        return 'foo';
    }
}

使用webpack进行汇总，但过滤器不起作用，Vue警告我：

build.js:830 [Vue warn]: Failed to resolve filter: season
(found in <Anonymous>)

如何将我的过滤器正确放入单独的文件中？

Answer 1

例如，您可以从文件中创建的数组中循环所有过滤器。

const filters =
[
   {
     name: 'season',
     execute: (value) => { return 'foo'; }
   }
]

export default filters

在你的main.js中你做了循环，

import filters from './filters'

filters.forEach(f => {
   Vue.filter(f.name, f.execute)
})

[]中

Answer 2

您没有全局注册该过滤器，您只是注册它以在#app的模板中使用。但是，您的应用会立即呈现组件app。

要使season过滤器全局可用，请使用

Vue.filter("season", f.season)

在你的app.js。

或者您可以将过滤器导入使用它们的组件中。

Answer 3

它在vuejs 1.0中。已从vuejs 2.0中删除双向过滤器。

见git issue discuss 和solution

vuejs：在外部文件中过滤？

3 个答案: