Wie verwende ich die Eingabetaste, wenn ich mit Vue.js mit Kontrollkästchen arbeite?

Question

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.

<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>

Answer 1

如果你想用你自己的方法来做，你可以这样做。

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>

如果你想使用回车键来做，你可以使用@keyup.enter代替@focus。