Vetur bug or code error? "property '$el' does not exist on type 'SVGelement'

pretty much as the title says, i have a number of components that use a setInterval() function to change the z-index on a number of child components and to place an overlay on the background. this all works fine, but i get a lot of errors in the terminal stating

 89:47 Property '$el' does not exist on type 'SVGElement'.
         87 |         case 0:
         88 |           ;((this.$refs.overlay as HTMLElement).style.zIndex = '-1'),
         89 |             ((this.$refs.comp1 as SVGElement).$el.style.zIndex = '-1'),
            |                                               ^
         90 |             ((this.$refs.comp2 as SVGElement).$el.style.zIndex = '-1')
         91 |           break

and this error is echoed in vscode with the error:

Property ‘$el’ does not exist on type ‘SVGElement’.Vetur(2339)

besides some other seemingly non-related errors for vetur i didnt discover anything helpful googling the problem. is this a vetur bug or is there something wrongs with this code?

Well, you declared that this.$refs.comp1 should be an SVGElement, and SVGElements don’t have a $el property.

But from the ref’s name and the fact that you try to access $el, I would assume it’s a really a component, and not an SVG? So you may want to annotate $el to be a SVGElement instead?

yes, comp1 is a child component of the form

<template>
<svg>
   ...
</svg>
</template>

that im changing the z-index of. not sure i understand your suggestion to change the annotation of $el, i tried

(this.$refs.comp1.(this.$el as SVGElement).style.zIndex = ‘-1’)

and permutations thereof, but i get an error on the parenthesis where vetur states an identifier was expected

(this.$refs.comp1.$el as SVGElement)

ya that was one of the permutations i tried, and that too resulted in the an error from vetur

Property '$el' does not exist on type 'Vue | Element | Vue[] | Element[]'.
   Property '$el' does not exist on type 'Element'.Vetur(2339)

its definitely a typescript error though, i disabled all of the other extensions to r/o. so do i need to add $el to the shims-vue.d.ts? and what type would a SFC be to typescript?

((this.$refs.comp1 as Vue).$el as SVGElement)

1 Like

i see, yes that works, is there a way to type these components during component registration so you don’t have to ‘inline-type’ the components?