Comment utiliser la touche Entrée lorsque vous travaillez avec des cases à cocher à l'aide de Vue.js ?
P粉106301763
P粉106301763 2023-08-26 18:35:03
0
1
494
<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é>
P粉106301763
P粉106301763

répondre à tous(1)
P粉731977554

Si vous voulez le faire à votre manière, vous pouvez le faire.

export default {
  data() {
    return {
      filteredIngredients: [
        {name: "paper", checkbox: false},
        {name: "salt", checkbox: false}
      ]
    }
  },
  methods: {
    checkFocus(index) {
      this.filteredIngredients[index].checkbox = true;
    },
  }
}
<template>
  <div class="list-group-item px-md-4" v-for="(ingredient,index) in filteredIngredients" :key="index">
      <div class="row px-3">
          <div class="col-auto">
              <input
                class="form-check-input"
                type="checkbox"
                @keyup.enter="checkFocus(index)"
                v-model="ingredient.checkbox"
              />
          </div>
          <div class="col ps-0">
              <span class="mb-2 d-block text-gray-800">
                  <strong class="text-black-600">{{ingredient.name}}</strong>
              </span>
          </div>
      </div>
  </div>
</template>

Si vous souhaitez le faire en utilisant la touche Entrée, vous pouvez utiliser @keyup.enter au lieu de @focus.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal