강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

skyjoon2님의 프로필 이미지
skyjoon2

작성한 질문수

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

[퀴즈] 모달 컴포넌트의 slot 소개 및 퀴즈 안내

keyup.enter 질문드립니다.

작성

·

364

1

문득 이리저리 해보다가 궁금해서 질문드립니다.

 

<template>
    <div class="inputBox shadow">
        <!-- v-model : input에 입력된 텍스트를 동적으로 변화하게 해준다. -->
        <input type="text" v-model="newTodoItem" >
        <!-- <button v-on:click="addTodo">add </button>  -->
        <button class="addContainer" @click="addTodo" @keyup.enter="addTodo">ADD
            <i class="fa-solid fa-plus"></i>
        </button>

        <ModalTest v-if="showModal" @close="showModal = false">
          <template v-slot:header><h2>할 일을 입력하세요.</h2></template>
        </ModalTest>
    </div>
</template>

위의 코드와 같이  input에 아닌 button에 keyup.enter기능을 넣으면 어떻게 되나 궁금해서 넣었는데 해당버튼을 클릭하고 엔터를 누르면 버튼이 계속 눌러지는 상태가 지속됩니다. true false값을 줬지만 0.1초 사라지고 다시 팝업이 뜨더라구요. 찾아보니 button에는 이벤트 값이 없다? 이런 말들이 있는데 button을 엔터키로 제어하는법이 궁금합니다.

답변 1

1

캡틴판교님의 프로필 이미지
캡틴판교
지식공유자

안녕하세요, 버튼 요소에는 키 이벤트를 받을 수 없습니다. 키 이벤트를 받을 수 있는 요소는 HTML 인풋 요소들이에요 :)

 

skyjoon2님의 프로필 이미지
skyjoon2

작성한 질문수

질문하기