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'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.