HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
💣
🎉나영팀
/
폼 입력 바인딩
폼 입력 바인딩
폼 입력 바인딩

폼 입력 바인딩

날짜
May 4, 2022 18:00
태그
기록 공유
의견 나눔

이재웅


  • v-model은 form element 의 초기 value, checked, selected를 무시한다.(근데 왜 됨?)
 
  • textarea 의 content 영역에 사용하는 보간은 무시된다.
 
  • checkbox 그룹은 Array로 처리가 가능하다.
 
  • select에 multiple attribute를 정의하면 자동으로 배열이 바인딩 된다.
 
  • radio, checkbox, select는 v-bind 디렉티브를 이용해 동적으로 value 바인딩이 가능하다.
 
문서를 과신하지 말자. Codepen은 믿을것이 못된다.

장규범


폼 입력 바인딩
v-model 디렉티브: 폼 input과 textarea 엘리먼트 양방향 데이터 바인딩 생성
  • v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시함.
  • 항상 Vue 인스턴스 데이터를 원본 소스로 취급함.
  • 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야함.
문자열, 체크박스, 라디오, 셀렉트, 다중 셀렉트 개념 한번 볼 것
값 바인딩: v-bind 사용하여 다른 값 연동
 

팽건우


v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 syntex sugar (input, textarea , select ...)
 
금일 스터디를 하는 데 과제가 있어서 얼마 못해 아쉽습니다. 😂저
도요..

홍정기


v-model 은 form 요소의 초기 value와 checked, selected 속성을 무시함. 이거 조심! Vue 인스턴스 데이터를 원본 소스로 취급함.
IME 가 필요한 언어는 v-model 대신 input 이벤트를 사용해야함!
textarea 의 텍스트 보간은 작동하지 않음.
여러개의 체크박스에 동일한 배열 바인딩 가능, 배열에는 value 값 들어감
select 에서 초기값은 빈 값을 넣어주는게 좋음 ⇒ iOS에서 문제라는데 iOS에서 잘되네?ㄷㄷ
 
문서를 의심하자!