The Vue class ponent is a relatively new way of writing single-file ponents. It looks like this:

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

// The @Component decorator indicates the class is a Vue ponent
@Component({
  // All ponent 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)
  }
}

Here are some references to it:

.html#Class-Style-Vue-Components

However, none of those explain how to write filters in this syntax. If I try the following code in my template:

{{ output | stringify }}

And then try to write a filter as a class method, e.g.:

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

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

I get the following error:

What's the right way to add a filter in this new syntax?

The Vue class ponent is a relatively new way of writing single-file ponents. It looks like this:

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

// The @Component decorator indicates the class is a Vue ponent
@Component({
  // All ponent 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)
  }
}

Here are some references to it:

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

However, none of those explain how to write filters in this syntax. If I try the following code in my template:

{{ output | stringify }}

And then try to write a filter as a class method, e.g.:

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

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

I get the following error:

What's the right way to add a filter in this new syntax?

• javascript
• typescript
• vue.js
• vuejs2

• could you share the example in codesandbox.io? – Boussadjra Brahim Commented Oct 15, 2018 at 22:14

1 Answer 1

In a class ponent, the key is this ment (// All ponent options are allowed in here) in the docs:

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

This means that in the @Component section you should be able to add a filters object with your filter functions inside, like this

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

According to doc in https://github./vuejs/vue-class-ponent:

Note:

1. methods can be declared directly as class member methods.

2. Computed properties can be declared as class property accessors.

3. Initial data can be declared as class properties (babel-plugin-transform-class-properties is required if you use Babel).

4. data, render and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.

5. For all other options, pass them to the decorator function.