Vue.js如何在API变量定义之前实现自定义过滤器

我为我的vue.js应用程序创建了一个基本的自定义过滤器，我打算广泛使用它来为y API变量。这是过滤器在我app.js文件：Vue.js如何在API变量定义之前实现自定义过滤器

filters: { 
    myFilter: function(val) { 
    return val.toFixed(0) 
    } 
},

在我的index.html我只是这样称呼它

<p> {{ foo.bar.num | myFilter }} </p>

这将返回一个错误。 Cannot read property 'toFixed' of undefined。问题是foo.bar.num在加载API之前未定义。这个API有很多我想用于自定义过滤器的变量，因此在数据选项中预先定义它们是不切实际的。

这种情况下最好的方法是什么？

给它的默认值：

return typeof val == 'undefined' ? 0 : val.toFixed(0)

警告是不是从过滤器，但是从<p> {{ foo.bar.num }} </p>。解决这个问题的方法是在您的组件中定义：

data() { 
    return { 
    foo:{bar:{num:0}}} 
    } 
}

。这可能是矫枉过正的，有时你不知道对象的结构。无论如何，该警告仅在Vue.config.debug为true时显示，因此它应该在生产中消失。

2016-04-27 22:08:54 Jeff

解决方案NOWS给了我一个警告，'[Vue公司提醒]：评估时出错表达式“foo.bar.num”。但至少它不会打破应用程序。我会接受你的回答，并且会提出任何解决方案，让我无视控制台警告。 – harrypujols

请参阅编辑警告 – Jeff

Did'nt测试这个，但你是否尝试过其中一个生命周期钩子？

保持

<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

2016-04-28 09:05:30 Kristo

谢谢。虽然这是可行的，但将其应用于大量变量也是不切实际的。 – harrypujols

回答