Skip to content

FAQ

Jump to bottom
Herrington Darkholme edited this page Feb 26, 2017 · 9 revisions

1. Watch Scope

Inside watch function type of (this) is Vue if you do not annotate generic parameter. You might either cast it.

// Watched class property @Watch plus declaration and initiation
    @Watch(function (newValue, oldValue) {
        let self = <AddressComponent>this;
        if (newValue == 0)
            self.isNewAddress = true;
        else
            self.isNewAddress = false;
    })
    selectedBillingAddress: string = undefined;

or annotate generic parameter

@Watch<AddressComponent, string>(function(newVal, oldVal){
  this.isNewAdress
})

2. Property reification

One can specify more specific class in vue special fields like $el. This can be done by annotating types on a class property declaration without initializer.

class MyComponent extends Vue {
  // instance property reification
  $refs: {
    mychild: Vue
  }
  // don't initialize `$el`
  $el: HTMLDivElement
}

3. ComponentMeta augmentation

Sometimes you need new fields in Vue's instance configuration object.

For example, av-ts has no builtin vuex1.0 support, but you want to use av-ts in your projects under migration.

To support vuex property, you can use TypeScript's module augmentation feature.

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    vuex?: {}
  }
}
@Component({
  vuex: {}
})
class V extends Vue {}

Configuration objects in Component is merged with other fields defined in class body and then passed to Vue.extend.

4. var num: number = p({type: Number}) does not work

This is TypeScript feature that has no userland fix. You need to manually suppress the warning.

  @Prop show    = p({ type: Boolean, default: false }) as boolean
  @Prop width   = p({ type: Number, default: DEFAULT_WIDTH }) as number

More detail here

5. arrow function does not work in property.

@Component
class Example extends Vue {
  width = window.innerWidth
  height = window.innerHeight
  onResize = () => {
    this.width = window.innerWidth // won't work
    this.height = window.innerHeight // won't work
  }
}

Arrow function declared in constructor will not work due to ES6 spec. Please use method and Vue will automatically bind it for you.

More details in https://github.com/vuejs/vue-class-component/issues/67#issuecomment-282538238

Clone this wiki locally