使用Vue.js處理複選框時，如何使用Enter鍵？

Question

我正在學習Vue.js。在我的應用程式中，我建立了一個帶有多個複選框和搜尋功能的表單。當使用者使用Tab鍵聚焦複選框並按Enter鍵時，應該選取複選框。

<template>
  <div>
    <div v-for="(ingredient, index) in filteredIngredients" :key="index" class="list-group-item px-md-4">
      <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">{{ ingredient.name }}</strong>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    methods: {
      checkFocus(event) {
        // 這裡我能做什麼
      },
    },
  },
}
</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。