Vuetifyのv-text-field
autofocus
を使用しようとしていますが、初めてしか機能しません。ダイアログを閉じた後、機能しなくなりました。
これは私がやろうとしていることです:
<v-text-field ref="focus" autofocus></v-text-field>
グーグルしながら私はそれがいくつかのバージョンで修正された bug であることがわかりましたが、それらも私が試した一時的な解決策がありました:
watch: {
dialog: (val) ->
if !val
debugger
requestAnimationFrame( =>
@$refs.focus.focus()
)
}
私は何か間違ったことをしていますか、それともバグですか?ブレークポイントを設定すると、その時点で停止することがわかりました。誰かが私を正しい方向に導くことができますか?
私の唯一の違いは、Vuexを使用していて、ダイアログ変数がVuexストアにあることです。そしてダイアログはゲッター/セッターです。
dialog:
get: ->
return this.$store.state.my_store.isDialogOpen
set: (value) ->
this.$store.commit('my_store/MY_MUTATION', value)
私のために働いた唯一のものはv-if="dialog"
オートフォーカスの小道具は初期ロードでのみ機能するため、ダイアログを初めて開いたときにのみ利用できました。
したがって、ダイアログにオートフォーカスがある作業中のv-tex-fieldは次のようになります。
<v-text-field label="Label" v-if="dialog" autofocus></v-text-field>
サンドボックス(ただし、質問にも当てはまるようです)でコードにエラーがあり、提供された回避策からreturn
を削除しました。
watch: {
dialog (val) {
if (!val) return; // you removed `return` here
requestAnimationFrame(() => {
return this.$refs.focus.focus();
}
});
したがって、実際には 動作します