Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う

次のように、ボタン「A」を押すと右に入力フィールドが現われるようなものを作ったとき、たいてい、そのフィールドにフォーカスさせたくなってきます。これが難しい。

すぐに focus() しても、まだその DOM は表示されていないので、フォーカスが空振りしてしまいます。

そのようなときは、次のように $nextTick を使ってタイミングをずらすとよさそうです。

<div id="app">
  <button @click="c">A</button>
  <input v-if="s" ref="r" />
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: "#app",
    data: {s: false},
    methods: {
      c() {
        this.s = true
        this.$nextTick(() => this.$refs.r.focus())
      },
    },
  })
</script>

これでうまくいきました。

参照

vm.$nextTick https://jp.vuejs.org/v2/api/#vm-nextTick