[Vuejs]-Object is of type 'unknown' using focus() in vuejs $refs and ionic component

by

0👍

I struggled to find a solution for a long time, so I hope others will find this answer helpful.
The problem lies within Typescript validation.
We need to define the object type in order to use it.

So for using the refs object properties we need to tell TS what is this type of object.

The solution was:

(this.$refs.todoItemLabel as InstanceType<typeof IonInput>).$el.focus()

so instead of directly trying to access .$el we set the property type first so Typescript will know how to use it and what properties to expect from it.

if you have the same problem with other Ionic elements, you just need to set them here:
i.e.

(this.$refs.todoItemLabel as InstanceType<typeof IONIC_COMPONENT_NAME>).$el.THE_ELEMENT_METHOD_TO_CALL()

I hope it will save other people time 🙂

Leave a comment