使用 vue.js 注册自定义过滤器

Posted 2023-02-22

【中文标题】使用 vue.js 注册自定义过滤器

【英文标题】：Register custom filters with vue.js

【发布时间】：2016-02-26 10:44:06

【问题描述】：

我正在使用 Vue.js 和 Laravel 以及 Elixir 和 Browserify。我想注册一些自定义全局过滤器，每个过滤器都在自己的文件中。我试图按照文档进行操作，但无法正常工作。这是我得到的错误：

Uncaught ReferenceError: Vue is not defined

有什么想法吗？

这是我的代码：

vue/filters/reverse.js

Vue.filter('reverse', function (value) 
 return value.split('').reverse().join('')
)

vue/app.js

var Vue = require('vue');
Vue.use(require('vue-resource'));

new Vue(
    el: 'app',
    data: 
        test: 'abcde'
    ,
filters: 
    reverse: require './filters/reverse.js'


);

查看

<h1 v-text="test | reverse"></h1>

如果我在 reverse.js 中添加它，它仍然不起作用

var Vue = require('vue');

还有我的 gulpfile

    mix.browserify('app.js');

【问题讨论】：

您将脚本包含在刀片模板中的什么位置？另外，你能分享一下你的 gulpfile 中的相关代码行吗？

如果你使用 : require './filters/reverse.js' 会怎样？

抱歉，打错了。我实际上是想写'./filters/reverse.js'

刚刚更新了我的问题@Douglas.Sesar

如果存在 browserify 问题，请尝试通过 CDN 手动包含 Vue.js 以缩小范围。

【参考方案1】：

在 vue/filters/reverse.js 中这样尝试

module.exports =(function (value) 
  return value.split('').reverse().join('')
)

然后在你的 app.js 中

Vue.filter('reverse', require('./filters/reverse'))

【讨论】：

@Michalis Antoniou 这不是你想要的吗？如果你不希望它是全局的，只需在你的文件名周围添加括号，它应该像reverse: require( './filters/reverse.js')