Comment déclencher un événement de focus d'entrée dans la méthode dans Vue.js ?

Question

J'ai une entrée qui utilise l'événement suivant :

<b-nput
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            @focus="$event.target.select()"
          ></b-input>

Comment puis-je l'utiliser à l'intérieur @focus="$event.target.select()"Événement :

La méthode ci-dessus copie la valeur. Je dois déclencher l'événement de focus de sélection ci-dessus lorsque l'utilisateur clique sur copier Comment cela peut-il être fait correctement ?

Answer 1

Fourni 参考 pour votre contribution :

<b-input
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            ref="theInput"
          ></b-input>

Puis n'importe où dans le script du composant :

this.$refs['theInput'].focus();

Answer 2

Ajouter la méthode saved en tant que gestionnaire d'événements focus :

@focus="saved"

Méthode :

methods: {
  saved(event){ //the event is passed automatically as parameter
     event.target.select()
  }
}

Éditeur :

Essayez d'ajouter ref à l'élément d'entrée

<b-input
          ref="input"
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
         
            @focus="$event.target.select()"
          ></b-input>

Ensuite, déclenchez le focus par programmation dans la méthode :

methods: {
      async copy(s) {
      await navigator.clipboard.writeText(s) 
      this.$refs.input.focus();
     ...
    }
}