web-dev-qa-db-fra.com

L'autofocus de Vuetify ne fonctionne que lors de la première ouverture modale

J'essaie d'utiliser le v-text-fieldautofocus de Vuetify, mais cela ne fonctionne que la première fois. Après avoir fermé la boîte de dialogue, cela ne fonctionne plus.

Voici ce que j'essaie de faire:

<v-text-field ref="focus" autofocus></v-text-field>

En cherchant sur Google, j'ai découvert que c'était un bug qui a été corrigé dans une version mais ils avaient une solution temporaire que j'ai également essayée:

watch: {
     dialog: (val) ->
         if !val
             debugger
             requestAnimationFrame( =>
                @$refs.focus.focus()
             )
}

Suis-je en train de faire quelque chose de mal ou c'est toujours un bug? Définition du point d'arrêt J'ai vu qu'il s'arrête à ce point. Quelqu'un peut-il me conduire dans la bonne direction?

La seule différence que j'ai, c'est que j'utilise Vuex et que la variable de dialogue est dans le magasin Vuex. Et la boîte de dialogue est getter/setter.

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

La seule chose qui a fonctionné pour moi était le v-if="dialog" car l'accessoire de mise au point automatique ne fonctionnera que lors du chargement initial, c'est pourquoi il n'était disponible que pour la première fois que j'ai ouvert la boîte de dialogue.

Ainsi, le champ v-tex de travail avec autofocus dans la boîte de dialogue ressemblerait à ceci:

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

Dans votre sandbox (mais cela semble également être le cas dans votre question), vous avez eu une erreur dans votre code, vous avez supprimé return de la solution de contournement fournie:

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

Donc en fait ça marche

1
Traxo