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

Vue.js

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

環境

  • vue 2.6.10
  • typescript 3.5.3

NGケース

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

<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();
    });
}

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

このエントリーをはてなブックマークに追加
© 2019-2020 hassakulab.com, built with Gatsby