Custom methods through vue-class-component are not recognized with $ref

[Yc-Chen]

Hi all,

I have got an error message like this:

error TS2339: Property 'show' does not exist on type 'Element | Vue | Vue[] | Element[]'

It points to a line like this:

this.$refs['myDialog'].show()

This show is a method implemented in TypeScript using vue-class-component. It is in a class that extends Vue. I located the line in ./types/vue.d.ts here.

I guess it should be modified using generics like this:

readonly $refs: { [key: string]: [V extends Vue] | Element | Array<V extends Vue> | Array<Element>};

But it doesn't work by just doing that.

Does anyone know how to do it right?

Thanks!

[HerringtonDarkholme]

You either need cast it <YourComonent>this.$refs or reify $refs.
https://github.com/HerringtonDarkholme/av-ts/wiki/FAQ#2-property-reification

[plh97]

your descript don't let me know how to fix this problem. show the answer step by step, pls.

[plh97]

really confuse about ts+ vue