在Vue中使用模板引用值时出现“object is possible null”TypeScript错误

fjaof16o 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(274)

我引用了<h1>和ref="header"。我试图更改CSS规则，但TypeScript错误不允许我这样做。

const header = ref<HTMLElement | null>(null)

onMounted(() => {
  header.value.style.color = "red"
})

1条答案

这个错误是完全合理的：你不能确定这个元素是否存在如果该元素不存在，则模板ref的值将为null。就在ref的类型里：HTMLElement | null。
您可以将onMounted回调更改为以下内容来检查：

onMounted(() => {
  if (header.value)
    header.value.style.color = "red"
})