[Vue.js]その時点で存在しない要素にアクセスする

Vue.jsにて、v-ifディレクティブによりでレンダリングされていない要素を$refsで参照しようとして嵌ったので記録を残しておきます。

• vue 2.6.10
• typescript 3.5.3

ボタンを押したら入力フィールドを表示してフォーカスを当てる単一ファイルコンポーネントです。フォーカスしようとしてもその時点ではDOM要素が存在しないので、this.$refs.inuptはundefinedになってしまうわけですね。

<template>
    <div>
        <input v-if="isInputMode" ref="input">
        <button v-on:click="onClick">focus</button>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Sample extends Vue{

    isInputMode : boolean = false;

    onClick() : void{
        isInputMode = true;
        (this.$refs.input as HTMLInputElement).focus();
    }
}
</script>

マウントしなおしてからアクセスするようにすればいいですね。

onClick() : void{
    isInputMode = true;
    Vue.nextTick(() =>{
        (this.$refs.input as HTMLInputElement).focus();
    });
}

まあとりあえず動くんですけど、時間を跨ぐ処理は不明なバグを埋めやすいのでなるべく避けたいですね。