web-dev-qa-db-ja.com

Vuetifyのオートフォーカスは最初のモーダルオープンでのみ機能します

Vuetifyのv-text-fieldautofocusを使用しようとしていますが、初めてしか機能しません。ダイアログを閉じた後、機能しなくなりました。

これは私がやろうとしていることです：

<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)
javascriptvue.jsvuejs2vuetify.js
14
Tarvo Mäesepp

私のために働いた唯一のものはv-if="dialog"オートフォーカスの小道具は初期ロードでのみ機能するため、ダイアログを初めて開いたときにのみ利用できました。

したがって、ダイアログにオートフォーカスがある作業中のv-tex-fieldは次のようになります。

<v-text-field label="Label" v-if="dialog" autofocus></v-text-field>
18
Tarvo Mäesepp

サンドボックス（ただし、質問にも当てはまるようです）でコードにエラーがあり、提供された回避策からreturnを削除しました。

watch: {
  dialog (val) {
    if (!val) return; // you removed `return` here
    requestAnimationFrame(() => {
      return this.$refs.focus.focus();
    }
  });

したがって、実際には 動作します

1
Traxo