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

Vue.js how to implement custom filter before API variable is defined

本文关键字：实现 自定义 过滤器 变量 API js 定义 Vue      更新时间：2023-09-26

我为我的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

相关文章：