I am working on a vue.js 3 project, where I need to refer/get a div element in my script by initially declaring a null reference like this const refRouterView = ref(null) and I am not sure how to make TypeScript aware of DomElement.
<template lang="pug">
.flex
router-view(ref='refRouterView')
...
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const refRouterView = ref(null);
const routerViewHeight = ref(500);
const getRouterViewHeight = () => {
setTimeout(() => {
routerViewHeight.value = refRouterView.value?.$el.offsetHeight;
}, 250);
};
onMounted(() => getRouterViewHeight());
</script>
I was getting this error Object is possibly 'null' before adding ? to refRouterView.value? which seems like hack and I don't like it. And, after adding ? I started seeing this error Property '$el' does not exist on type 'never'.
I tried adding HTMLElement to const refRouterView : HTMLElement = ref(null); but that introduce this error Property 'value' does not exist on type 'HTMLElement'. which was not solved even after adding ? to refRouterView.value?
Please help!
Originally my question was using div(ref='refRouterView') and @Thomas's answer solves it but I was using router-view. Just for making my question easy to understanding I mentioned div instead of router-view and that confused us, hence the answer did not solve my issue.
<template lang="pug">
.flex
div(ref='refRouterView')
...
</template>
If you ref a DOM node, you don't have an $el property, the ref directly points to the DOM node:
https://v3.vuejs.org/guide/composition-api-template-refs.html
And for the typescript part, you have to define the type like this as the refRouterView is a Proxy of a certain type:
const refRouterView = ref<HTMLDivElement>();
Then you can directly access the attributes:
refRouterView.value.offsetHeight
(this.$refs.refRouterView as Vue & { $el: () => any }).$el.offsetHeight
Please refer to it： Vetur bug or code error? “property ‘$el’ does not exist on type ‘SVGelement’