Vue.js의 수동 양식 입력 바인딩
v-model
를 사용합니다. v-model
를 사용하면 데이터 모델을 양식 필드의 값과 매우 쉽게 동기화할 수 있으며 그 반대도 가능합니다.소위 양방향 바인딩입니다.
필드의 값 바인딩에 대해 더 많은 제어가 필요한 경우가 있을 수 있으며 이때 수동 바인딩이 필요합니다.
후드 아래의 v-모델
Vue.js 문서는
v-model
가 어떻게 작동하는지에 대한 힌트를 제공합니다. 값 바인딩 및 변경 이벤트 리스너를 사용되는 필드 요소에 연결합니다.예를 들어
<input v-model="text">
는 다음과 같이 변환됩니다.<input
:value="text"
@input="event => text = event.target.value"
>
다음은
v-model
( v-bind
) 및 :
( v-on
)를 사용하여 수동으로 @
양방향 바인딩을 재생성하기 위해 활용할 수 있는 기본 양식 요소에 대한 다양한 DOM 속성 및 이벤트 쌍입니다.요소
재산
이벤트
입력
:값
@입력
텍스트 영역
:값
@입력
확인란
:체크
@변화
라디오
:체크
@변화
고르다
:값
@변화
실제 코드에서 어떻게 보이는지 확인해 봅시다.
수동 바인딩 예
v-model
를 사용하는 양방향 양식 입력 바인딩에 대한 example이 Vue.js 문서 사이트에 있지만 동일한 바인딩을 수동으로 만드는 방법에 대한 예는 없습니다.checkbox
및 radio
에 대한 수동 바인딩을 생성하는 방법을 살펴보겠습니다.At the end of this article you will find a CodeSandbox that recreates the Vue.js Form Bindings example using manual bindings. It also includes examples for manual binding multi-checkbox and multi-select lists.
체크박스
우리는 일반적으로 체크박스를 데이터 모델의
boolean
값에 바인딩합니다. 수동 바인딩을 사용하여 이를 수행하는 방법은 다음과 같습니다.<input
type="checkbox"
:checked="booleanValue"
@change="booleanValue = $event.target.checked"
/>
여기서 핵심은
v-bind
속성에 checked
한 다음 checked
이벤트가 발생하면 확인란의 change
속성을 읽어 데이터 모델에 값을 다시 할당하는 것입니다.
$event
is a special variable that gives us access to the original DOM event inside the inline handler.
라디오
라디오 버튼을 바인딩할 때 텍스트 변수를 사용하여 선택한 값을 보유할 가능성이 높습니다. 수동 바인딩은 다음과 같이 작동합니다.
checked
속성을 현재 선택된 값이 특정 라디오 버튼에 해당하는지 여부를 평가하는 표현식의 결과에 바인딩합니다. change
이벤트를 사용하여 라디오의 선택된 값을 읽습니다.Notice that we use
$event.target.value
as we need the actual text value.
<input
type="radio"
value="One"
:checked="textValue === 'One'"
@change="textValue = $event.target.value"
/>
<input
type="radio"
value="Two"
:checked="textValue === 'Two'"
@change="textValue = $event.target.value"
/>
더 많은 예...
다중 확인란 및 다중 선택 목록을 바인딩하는 방법을 보여 주는 자세한 예는 CodeSandbox here에서 확인할 수 있습니다.
수동 바인딩이 Vue.js 2 및 Vue.js 3 모두에서 정확히 동일한 방식으로 작동한다는 것을 아는 것이 좋습니다.
읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(Vue.js의 수동 양식 입력 바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kouts/manual-form-input-bindings-in-vuejs-4hjo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)