Comment utiliser la touche Entrée lorsque vous travaillez avec des cases à cocher à l'aide de Vue.js ?
P粉106301763
2023-08-26 18:35:03
<p>J'apprends Vue.js. Dans mon application, j'ai créé un formulaire avec plusieurs cases à cocher et une fonction de recherche. La case à cocher doit être cochée lorsque l'utilisateur utilise la touche Tab pour focaliser la case à cocher et appuie sur la touche Entrée. </p>
<pre class="brush:html;toolbar:false;"><template>
<div>
<div v-for="(ingrédient, index) dans filteredIngredients" :key="index" class="list-group-item px-md-4">
<div class="ligne px-3">
<div class="col-auto">
<input v-model="ingredient.checkbox"
class = "form-check-input"
tapez = "case à cocher"
@focus="checkFocus"
/>
</div>
<div class="col ps-0">
<span class="mb-2 d-block text-gray-800">
<strong class="text-black-600">{{ ingrédients.name }}</strong>
</envergure>
</div>
</div>
</div>
</div>
</modèle>
<script>
exporter par défaut {
méthodes : {
méthodes : {
checkFocus (événement) {
//Que puis-je faire ici ?
},
},
},
}
</script>
≪/pré>
Si vous voulez le faire à votre manière, vous pouvez le faire.
Si vous souhaitez le faire en utilisant la touche Entrée, vous pouvez utiliser @keyup.enter au lieu de @focus.