如何在Vue类组件中定义过滤器？

Question

Vue类组件是编写单文件组件的一种相对较新的方法。看起来像这样：

import Vue from 'vue'
import Component from 'vue-class-component'

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

这里有一些引用：

  

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components   https://github.com/vuejs/vue-class-component

但是，这些都没有解释如何使用此语法编写过滤器。如果我在模板中尝试以下代码：

{{ output | stringify }}

然后尝试将过滤器作为类方法编写，例如：

@Component
export default class HelloWorld extends Vue {
  // ... other things

  stringify(stuff: any) {
    return JSON.stringify(stuff, null, 2);
  }    
}

我收到以下错误：

以这种新语法添加过滤器的正确方法是什么？

Answer 1

在类组件中，关键是文档中的此注释（// All component options are allowed in here）：

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})

这意味着您可以在@Component部分中添加一个filters对象，其中包含您的过滤器功能，就像这样

@Component({
  // other options
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

根据https://github.com/vuejs/vue-class-component中的文档：

  

注意：

     

  

1. 方法可以直接声明为类成员方法。

  

2. 计算的属性可以声明为类属性访问器。

  

3. 初始数据可以声明为类属性（如果使用Babel，则需要babel-plugin-transform-class-properties）。

  

4. 数据，渲染和所有Vue生命周期挂钩也可以直接声明为类成员方法，但是您不能在实例本身上调用它们。声明自定义方法时，应避免使用这些保留名称。

  

5. 对于所有其他选项，请将它们传递给装饰器函数。