Vue.js를 사용하여 체크박스 작업 시 Enter 키를 사용하는 방법은 무엇입니까?

Question

저는 Vue.js를 배우고 있습니다. 내 응용 프로그램에서는 여러 확인란과 검색 기능이 있는 양식을 만들었습니다. 사용자가 Tab 키를 사용하여 확인란에 초점을 맞추고 Enter 키를 누를 때 확인란이 선택되어야 합니다.

<템플릿>
  <div>
    <div v-for="(성분, 인덱스) infilteredIngredients" :key="index" class="list-group-item px-md-4">
      <div class="row px-3">
        <div class="col-auto">
          <input v-model="ingredient.checkbox"
            class="양식-확인-입력"
            유형="체크박스"
            @focus="체크포커스"
          />
        </div>
        <div class="col ps-0">
          <span class="mb-2 d-block text-gray-800">
            <strong class="text-black-600">{{ 성분 이름 }}</strong>
          </스팬>
        </div>
      </div>
    </div>
  </div>
</템플릿>

<스크립트>
기본값 내보내기 {
  방법: {
    방법: {
      checkFocus(이벤트) {
        //여기서 무엇을 할 수 있나요?
      },
    },
  },
}
</스크립트>

Answer 1

원하는 방식으로 하고 싶다면 이렇게 하면 됩니다.

으아악 으아악

Enter 키를 사용하려면 @focus 대신 @keyup.enter를 사용하면 됩니다.