Bagaimana untuk menggunakan kekunci Enter apabila bekerja dengan kotak pilihan menggunakan Vue.js?

Question

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.

eksport lalai {
  kaedah: {
    kaedah: {
      semakFokus(acara) {
        //Apa yang boleh saya buat di sini?
      },
    },
  },
}

Answer 1

Kalau nak buat cara sendiri pun boleh.

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>

Jika anda mahu melakukannya menggunakan kekunci Enter, anda boleh menggunakan @keyup.enter dan bukannya @focus.