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

Question

我为我的vue.js app创建了一个基本的自定义过滤器，我打算广泛用于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。问题是在加载API之前未定义foo.bar.num。 API有很多我想用于自定义过滤器的变量，因此在数据选项中预先定义它们是不切实际的。

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

Answer 1

给它一个默认值：

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

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

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

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

Answer 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