類型“從不”上不存在屬性“$el”

Question

我正在處理一個vue.js 3項目，我需要通過最初聲明null引用來引用/獲取腳本中的div元素，就像這樣const refRouterView = ref(null)並且我不確定如何讓 TypeScript 知道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>

我得到這個錯誤Object is possibly 'null' before adding ? 到refRouterView.value? 這看起來像黑客，我不喜歡它。 而且，添加后? 我開始看到此錯誤Property '$el' does not exist on type 'never'.

我嘗試將HTMLElement添加到const refRouterView: HTMLElement = ref(null); 但這會引入此錯誤Property 'value' does not exist on type 'HTMLElement'. 添加后還沒有解決? 到refRouterView.value?

請幫忙！

更多信息

最初我的問題是使用div(ref='refRouterView')並且@Thomas 的回答解決了它，但我使用的是router-view 。 只是為了讓我的問題更容易理解，我提到了div而不是router-view ，這讓我們感到困惑，因此答案沒有解決我的問題。

<template lang="pug">
  .flex
    div(ref='refRouterView')
      ...
</template>

Answer 1

如果你ref一個 DOM 節點，你沒有$el屬性，引用直接指向 DOM 節點：
https://v3.vuejs.org/guide/composition-api-template-refs.html

對於 typescript 部分，您必須像這樣定義類型，因為refRouterView是某種類型的Proxy ：
const refRouterView = ref<HTMLDivElement>();

然后可以直接訪問屬性：
refRouterView.value.offsetHeight

Answer 2

(this.$refs.refRouterView as Vue & { $el: () => any }).$el.offsetHeight

請參考： Vetur bug or code error? “‘SVGelement’類型上不存在屬性‘$el’