Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う
2691 ワード
次のように、ボタン「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
Author And Source
この問題について(Vue.js で表示に切り替えたDOMにフォーカスできないときは $nextTick を使う), 我々は、より多くの情報をここで見つけました https://qiita.com/akicho8/items/b4d071ea7eae562f529d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .