阅读中文版本

Vue Cannot Read Properties of null (reading value)

Fix "Cannot read properties of null (reading 'value')" by initializing template refs and reading DOM refs only after mount.

console.log(elRef.value) // in setup vs onMounted

elRef.value?.focus()

Symptoms

The error “Vue Cannot Read Properties of null (reading value)” points at a specific failure mode. This guide documents the symptoms you can observe, the commands that isolate the cause, the root cause, the fix, and the checks that prove the fix works.

Observed symptoms include:

• Cannot read properties of null (reading ‘value’) in a composable
• A ref is null in setup but works in an event handler
• The error appears only on first render

Reproduce and Diagnose

Reproduce the failure in isolation before changing any code. Work through the checks below in order; each one narrows the search space.

Step 1: Confirm the ref is null before mount

console.log(elRef.value) // in setup vs onMounted

It is null during setup and populated in onMounted; reading early causes the error.

Step 2: Guard reads with optional chaining

elRef.value?.focus()

Optional chaining avoids the immediate crash while you move the call to the right lifecycle.

Likely contributors, in order of frequency:

• A DOM template ref is read before onMounted, when it is still null
• A composable returns null before its async initialization completes
• The ref name does not match between template and script

Root Cause

Template refs are assigned only after the component mounts. Reading elRef.value during setup yields null, and any property access on it throws, which is why the same code works inside onMounted or event handlers.

The Fix

Access DOM refs inside onMounted or later, guard with optional chaining, and initialize composable return values to a safe default until data loads.

Watch out: Awaiting nextTick is not a substitute for onMounted when the element may not exist at all; ensure it renders.

<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref(null);

onMounted(() => {
  inputEl.value?.focus(); // safe: populated after mount
});
</script>

<template>
  <input ref="inputEl" />
</template>

Verify and Prevent

Run the component and confirm no null access; focus or measurement should succeed after mount.

Once verified, add a regression test that reproduces the original symptom so the failure cannot silently return.

This class of failure is usually environmental rather than pure logic, so capture the exact command, the environment variables, and the working directory in your bug report. Reproduce it in the smallest possible script, then widen the scope only once the minimal case is understood. A short written checklist for this failure mode saves hours the next time it appears.