Getting "object is possibly null" TypeScript error when using template ref value in Vue

Question

I am referencing an <h1> with ref="header". I'm trying to change CSS rules but a TypeScript error is not letting me.

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

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

You could simply use optional chaining to header.value?.style.color = 'red' — cSharp
– cSharp, Commented Aug 9, 2022 at 23:52
I have this error doing that: The left-hand side of an assignment expression may not be an optional property access.ts(2779) — Tomas Gil Amoedo
– Tomas Gil Amoedo, Commented Aug 9, 2022 at 23:53

Darryl Noakes · Accepted Answer · 2023-10-19 02:34:27Z

3

The error is perfectly reasonable: you can't be sure that that element exists. And if the element doesn't exist, the template ref's value will be null. It's actually right there in the type for the ref: HTMLElement | null.

You can change your onMounted callback to the following to check for that:

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

edited Oct 19, 2023 at 2:34

answered Aug 10, 2022 at 0:17

Darryl Noakes

2,8301 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting "object is possibly null" TypeScript error when using template ref value in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related