Vue 클래스 구성 요소에서 필터를 정의하려면 어떻게 해야 합니까?

Vue 클래스 구성 요소에서 필터를 정의하려면 어떻게 해야 합니까?

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);
  }    
}

다음의 에러가 표시됩니다.

이 새로운 구문에 필터를 추가하는 올바른 방법은 무엇입니까?

클래스 컴포넌트에서는 이 코멘트(// 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의 doc에 따르면:

주의:

1. 메서드는 클래스 멤버 메서드로 직접 선언할 수 있습니다.

2. 계산된 속성은 클래스 속성 액세스자로 선언할 수 있습니다.

3. 초기 데이터는 클래스 속성으로 선언할 수 있습니다(Babel-plugin-transform-class-properties를 사용하는 경우 필요).

4. data, render 및 모든 Vue 라이프 사이클 훅을 클래스 멤버 메서드로 직접 선언할 수도 있지만 인스턴스 자체에서 호출할 수는 없습니다.커스텀 메서드를 선언할 때는, 이러한 예약명은 사용하지 말아 주세요.

5. 다른 모든 옵션은 데코레이터 기능에 전달합니다.

언급URL : https://stackoverflow.com/questions/52823903/how-do-i-define-a-filter-in-a-vue-class-component