Form 입력 바인딩

프론트엔드 폼 작업시 폼 입력 엘리먼트의 상태를 js 상태와 동기화해야 하는 경우가 많음

<input
  :value="text"
  @input="event => text = event.target.value">


//단순화
<input v-model="text">

 

* v-model 은 모든 폼 엘리먼트에서 감지되는 초기 value , checked 또는 select 속성 값을 무시

항상 현재 바인딩된 js 상태를 유효값으로 취급, reactivity API를 사용하여 초기 값 선언해야함

 

 

기본 사용법

 

텍스트

<p>메세지: {{ message }}</p>
<input v-model="message" placeholder="메세지 입력하기" />

 

* 만약 IME 구성 (한국어 일본어 중국어)가 안된다면 v-model 대신 input 이벤트리스너와 value 바인딩을 사용해서 기능구현....

 

여러 줄 텍스트

<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>

<textarea> 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용

<!-- 잘못된 사례 -->
<textarea>{{ text }}</textarea>

<!-- 올바른 사례 -->
<textarea v-model="text"></textarea>

 

 

체크박스

불리언 값 사용

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

 

배열 또는 Set에 여러 개의 체크박스 값을 바인딩 가능

<script setup>
import { ref } from 'vue'

const checkedNames = ref([])
</script>

<template>
  <div>체크된 이름: {{ checkedNames }}</div>

  <input type="checkbox" id="demo-jack" value="젝" v-model="checkedNames">
  <label for="demo-jack">젝</label>

  <input type="checkbox" id="demo-john" value="존" v-model="checkedNames">
  <label for="demo-john">존</label>

  <input type="checkbox" id="demo-mike" value="마이크" v-model="checkedNames">
  <label for="demo-mike">마이크</label>
</template>

- 이 경우 checkedNames 배열은 항상 현재 체크된 순서대로 값을 포함

 

라디오

<script setup>
import { ref } from 'vue'

const picked = ref('One')
</script>

<template>
  <div>선택한 것: {{ picked }}</div>

  <input type="radio" id="one" value="하나" v-model="picked" />
  <label for="one">하나</label>

  <input type="radio" id="two" value="둘" v-model="picked" />
  <label for="two">둘</label>
</template>

 

셀렉트

-  v-model 표현식의 초기 값이 옵션과 일치하지 않으면 select 엘리먼트가 선택되지 않은 상태로 렌더링

아래 예시처럼 비활성화된 옵션에 빈 값을 제공하는것이 좋음

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <div>선택됨: {{ selected }}</div>
  
  <select v-model="selected">
    <option disabled value="">다음 중 하나를 선택하세요</option>
    <option>가</option>
    <option>나</option>
    <option>다</option>
  </select>
</template>

 

다중 선택 (배열로 바인딩 됨)

<script setup>
import { ref } from 'vue'

const selected = ref([])
</script>

<template>
  <div>선택됨: {{ multiSelected }}</div>

  <select v-model="multiSelected" multiple>
    <option>가</option>
    <option>나</option>
    <option>다</option>
  </select>
</template>

<style>
select[multiple] {
  width: 100px;
}
</style>

 

셀렉트 옵션은 v-for 로 동적으로 렌더링 가능

<script setup>
import { ref } from 'vue'

const selected = ref('1')

const options = ref([
  { text: '하나', value: '1' },
  { text: '둘', value: '2' },
  { text: '셋', value: '3' }
])
</script>

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>

	<div>선택됨: {{ selected }}</div>
</template>

 

 

값 바인딩 하기

라디오, 체크박스 및 셀렉트 옵션의 경우 v-model 에 바인딩된 값은 일반적으로 정적 문자열

<!-- `picked`는 선택 시 문자열 "가"입니다. -->
<input type="radio" v-model="picked" value="가" />

<!-- `toggle`은 true 또는 false입니다. -->
<input type="checkbox" v-model="toggle" />

<!-- `selected`는 첫 번째 옵션이 선택될 때 문자열 "한글"입니다. -->
<select v-model="selected">
  <option value="한글">한글</option>
</select>

 

 

동적 바인딩 (v-model)

체크박스

<input
  type="checkbox"
  v-model="toggle"
  true-value="네"
  false-value="아니오" />
  
  // v-bind (:) 를 사용하여 동적인 값을 바인딩 하는 방법
  <input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

** 브라우저는 폼 제출 시 체크되지 않은 상자는 포함하지 않기 때문에, 무조건 둘 중 하나가 체크 되어야한다면 

라디오를 구현해야한다.

 

라디오

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

 

셀렉트 옵션

<select v-model="selected">
  <!-- 인라인 객체 리터럴 -->
  <option :value="{ number: 123 }">123</option>
</select>

위의 옵션이 선택되면 selected 는 number:123 객체 값으로 설정된다.

 

---

 

수식어

 

.lazy

기본적으로 v-model 은 각 input 이벤트 이후 데이터와 입력을 동기화 (IME 구성 제외 : 한중일 언어)

대신 change 이벤트 이후에 동기화하기 위해 .lazy 수식어 추가

<!-- "input" 대신 "change" 이벤트 후에 동기화됨 -->
<input v-model.lazy="msg" />

 

.number

<input v-model.number="age" />

사용자 입력이 자동으로 숫자 유형으로 변환, but parseFloat() 으로 파싱할 수 없으면 원래 값 사용

인풋에 type="number" 가 있으면 .munber 자동 적용

 

.trim

*trim 문자열 좌우에서 공백을 제거하는 함수

<input v-model.trim="msg" />