J'ai un composant de VUE dans lequel j'essaie d'autofocus le premier champ utilisant v-focus . Mais mon problème est que j'ai des composants dynamiques qui seront inclus en haut de la page. Donc, dans ce cas, comment puis-je appliquer une autofocasse sur le composant inclus de manière dynamique?
3 Réponses :
Il est difficile de dire comment vous ajoutez la (s) entrée (s) au [ Miroir CodePen ] P> P> DOM code>, sans aucun pseudo code de votre part, mais c'est un moyen de le faire.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<div v-for="(input, index) in inputs" :key="index">
<input :ref="input" type="text" />
</div>
<div>
<button type="button" @click="handleClick">Click to add input</button>
</div>
</div>
</div>
J'ai trouvé cette réponse sur laracast et cela a fonctionné pour moi. Tout ce que j'ai fait était insérer le code ci-dessous dans mon champ de formulaire dynamique.
let app = new Vue({
el: '#app',
data: {
items: [
{title: 'Apple'},
{title: 'Orange'},
]
},
methods: {
addItem(){
this.items.push({title: "Pineapple"});
this.$nextTick(() => {
let index = this.items.length - 1;
let input = this.$refs.title[index];
input.focus();
});
}
}
});
La clé est de définir alors vous aurez Accès à un tableau appelé Vous devez donc avoir besoin de faire p> ref code> sur toutes vos entrées code> s sur la même chaîne comme ceci: ceci. $ Refs.MyInputs code> à l'intérieur d'un gestionnaire d'événements. P> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div>
<div v-for="index in 3" :key="index">
<input ref="myInputs" type="text" />
</div>
</div>
</div>
Souhaitez-vous fournir un pseudo-code démontrant votre problème? Nous serions capables de mieux vous aider de cette façon.
Dis, j'ai 3 entrées
INPUT1, INPUT2 & INPUT3 . Dans mon composant, l'ordre des entrées estINPUT1 & INPUT2 , de sorte que le premier élément estentrée1 . Basé sur certaines conditions, j'ajouteINPUT3 en haut deINPUT1 & INPUT2 , donc, le premier composant sera maintenantentrée3 . Alors, comment puis-je appliquer l'autofocus au premier élément tout le temps?Utilisez-vous une directive personnalisée ou un
V-focus bibliothèque ?J'utilise V-Focus et l'entrée est ajoutée à la page Charger, pas dans une boucle
Pouvez-vous s'il vous plaît fournir un Codepen décrivant votre demande? La logique serait la même dans une boucle ou non. Vous devez utiliser des réfs.
J'ai mis en œuvre à l'aide de
REFS Ça a fonctionné. Merci.Aucun problème. Si ma solution vous a aidé, n'hésitez pas à marquer comme réponse acceptée et à ajouter un uppote :) merci!
@Tejad pouvez-vous poster votre réponse, gentil monsieur? Cela serait d'une grande aide! Merci.