我为我的vue.js应用程序创建了一个基本的自定义过滤器,我打算广泛用于y API变量。这是我的app.js文件中的过滤器:
filters: {
myFilter: function(val) {
return val.toFixed(0)
}
},
在我的index.html中,我简单地将其称为
<p> {{ foo.bar.num | myFilter }} </p>
这将返回一个错误。CCD_ 1。问题是在加载API之前未定义foo.bar.num
。API有太多的变量我想用于我的自定义过滤器,所以在数据选项中预先定义它们是不切实际的。
在这种情况下,最好的方法是什么?
给它一个默认值:
return typeof val == 'undefined' ? 0 : val.toFixed(0)
警告不是来自过滤器,而是来自<p> {{ foo.bar.num }} </p>
。解决这个问题的方法是定义:
data() {
return {
foo:{bar:{num:0}}}
}
}
在您的组件中。这可能有些过头了,有时你还不知道对象的结构。无论如何,只有当Vue.config.debug
是true
时,警告才会显示,因此它应该在生产中消失。
没有测试过,但您尝试过其中一个生命周期挂钩吗?
保留
<p> {{ foo.bar.num }} </p>
做
var Foo = new Vue({
// el and data and stuff
ready: function () {
this.$options.filters.myFilter(this.foo.bar.num);
}
});
另一种方法可能是计算选项:http://vuejs.org/api/#computed