Array type on Vue Component Props breaks the Linter

Question

I am creating an AppProps class with an Array prop , using Vue.extend...

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

const AppProps = Vue.extend({
  props: {
    test1: String,
    test2: Array,
  },
});

and then extending AppProps to create my component..

@Component({})
export default class ArrayPropsExample extends AppProps {
  get computedMessage() {
    return this.test1 + ' ' + this.test2;
  }
}

this is per the typescript example in the vue-class-component . Vue is happy but the linter is complaining that it can't see my prop types on the class...

19:17 Property 'test1' does not exist on type 'ArrayPropsExample'. 17 | export default class ArrayPropsExample extends AppProps { 18 | get computedMessage() {

19 | return this.test1 + ' ' + this.test2; | ^ 20 | } 21 | }

relevant code is here (https://github.com/JavascriptMick/vue-d3-poc/blob/master/src/components/ArrayPropsExample.vue)

If I set the test2 type to String, the linter is happy, but using Array seems to break the linter.. this is pretty weird and inconsistent

Michael Dausmann Michael Dausmann · Accepted Answer · 2018-06-23T03:36:03

Ok so I was able to work around this issue by changing my approach. essentially bringing in the vue-property-decorator and setting script=false in my tsconfig...

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Component
export default class ArrayPropsExample extends Vue {
  @Prop({ default: 'hello' })
  public test1: string;

  @Prop({ default: []})
  public test2: any[];

  get computedMessage() {
    return this.test1 + ' ' + this.test2;
  }
}

I like this approach better anyway.

Array type on Vue Component Props breaks the Linter

1 Answers