<p>Saya sedang belajar Vue.js. Dalam aplikasi saya, saya telah mencipta borang dengan berbilang kotak semak dan fungsi carian. Kotak semak hendaklah dipilih apabila pengguna menggunakan kekunci Tab untuk memfokuskan kotak pilihan dan menekan kekunci Enter. </p> <pre class="brush:html;toolbar:false;"><template> <div> <div v-for="(bahan, indeks) dalam filteredIngredients" :key="index" <div class="baris px-3"> <div class="col-auto"> <input v-model="ingredient.checkbox" class="input-semak-bentuk" type="kotak semak" @focus="checkFokus" /> </div> <div class="col ps-0"> <span class="mb-2 d-block text-grey-800"> <strong class="text-black-600">{{ ingredient.name }}</strong> </span> </div> </div> </div> </div> </template> <skrip> eksport lalai { kaedah: { kaedah: { semakFokus(acara) { //Apa yang boleh saya buat di sini? }, }, }, } </skrip> </pra>

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>