<p>Ich lerne Vue.js. In meiner Bewerbung habe ich ein Formular mit mehreren Kontrollkästchen und einer Suchfunktion erstellt. Das Kontrollkästchen sollte aktiviert sein, wenn der Benutzer die Tabulatortaste zum Fokussieren des Kontrollkästchens verwendet und die Eingabetaste drückt. </p> <pre class="brush:html;toolbar:false;"><template> <div> <div v-for="(ingredient, index) in filteredIngredients" :key="index" <div class="row px-3"> <div class="col-auto"> <input v-model="ingredient.checkbox" class="form-check-input" type="checkbox" @focus="checkFocus" /> </div> <div class="col ps-0"> <span class="mb-2 d-block text-gray-800"> <strong class="text-black-600">{{ Ingredients.name }}</strong> </span> </div> </div> </div> </div> </template> <script> Standard exportieren { Methoden: { Methoden: { checkFocus(event) { //Was kann ich hier tun? }, }, }, } </script> </pre>

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>