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

작성자 없음

작성자 정보가 삭제된 글입니다.

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

json-server & axios : CRUD 구현

form 태그에 이벤트 발생시 작동하지 않는건에 대해

작성

·

181

0

질문은 아니고~ 수업을 진행하다

form @submit.prevent="함수명"

해당 부분이 작동하지 않아(아예 무반응) button태그에 실행 함수를 넣으니 잘 작동하여 form 문제인거 같아 확인해보니 form안에 button이 존재할 경우 발생하는 문제였네요.

form 태그안에 @submit.prevent="함수명" 은 유지하고

버튼에 @click.self.prevent="함수명"을 넣으면 됩니다. 동일 문제가 발생하신다면 진행해 보세요.

 

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

말씀하신 문제가 정확히 이해가 안돼서요


  • form 요소 안에 button 요소가 있을 경우 button의 기본 type이 submit 이므로 submit 이벤트가 동작합니다.

  • 이벤트의 .prevent modifiers는 이벤트의 기본동작을 막는 역할을 합니다.

  • 그러므로 form 요소 하위의 button에 .prevent modifiers 가 있는경우 submit 이벤트가 동작하지 않습니다.

위의 스펙을 인지하셨을까요? 그래도 같은 이슈가 발생하는지 여쭤봅니다 🙂

 

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기