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

【问题标题】：Vue.js how to implement custom filter before API variable is definedVue.js如何在定义API变量之前实现自定义过滤器
【发布时间】：2016-04-27 21:31:10
【问题描述】：

我为我的 vue.js 应用程序创建了一个基本的自定义过滤器，我打算将其广泛用于 y API 变量。这是我的 app.js 文件中的过滤器：

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 有很多变量我想用于我的自定义过滤器，因此在数据选项中预先定义它们是不切实际的。

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

【问题讨论】：

【解决方案1】：

给它一个默认值：

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

警告不是来自过滤器，而是来自<p> {{ foo.bar.num }} </p>。解决这个问题的方法是定义：

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

在您的组件中。这可能有点矫枉过正，有时您还不知道对象的结构。无论如何，警告只在Vue.config.debug 是true 时显示，所以它应该在生产中消失。

【讨论】：

解决方案现在给了我一个警告，[Vue warn]: Error when evaluating expression "foo.bar.num". 但至少它没有破坏应用程序。我会接受你的回答，并会支持任何让我免于控制台警告的解决方案。

【解决方案2】：

没有对此进行测试，但您尝试过其中一个生命周期挂钩吗？

保持

<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

【讨论】：