Computed attributes

[brunosiqueira]

How can I use computed attributes with decorators?
Thanks!

[ninjascant]

As mentioned in this tutorial, computed properties are implemented in vue-property-decorator as ES6 getters:

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}

Which is equal to this plain Vue syntax:

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

[barakbd-bluevine]

What about setters?
I could not find an example of that

[kaorun343]

@barakbd-bluevine

Hi.

@Component
export default class App extends Vue {
  set myComputedProp(value: any) {
    console.log(value)
  }
}

[awacode21]

What about two-way computed properties (with get and set) in TypeScript. I absolutely do not find any example on this

[GeniaT]

Would be great to add computed attributes examples to the documentation.

[kaorun343]

Converting from getters / setters into computed properties is provided by vue-class-component. Please ask to the repository.

@Component
class YourComponent extends Vue {
  firstname = ''
  lastname = ''

  get value() {
    return `${this.firstname} ${this.lastname}`
  }

  set value(fullname: string) {
    const [firstname, lastname] = fullname.split(' ')
    this.firstname = firstname
    this.lastname = lastname
  }
}

[oceanlvr]

How to use async / await in the getters / setters?

[kaorun343]

It'll be supported if the Vue itself does.