Vue · Middle · Question 30 of 75

What problem does `nextTick` solve here?

showInput.value = true;
await nextTick();
inputRef.value.focus();

✓Correct answer: The input is rendered asynchronously; waiting for the next tick ensures it exists in the DOM
2It delays the focus by one second for UX
3It makes showInput reactive

Explanation

State changes are batched; the DOM updates later in the same tick. Without nextTick, inputRef.value is still null.

Further reading

Test yourself

Take the Vue · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.