40 폼 입력 바인딩

source: categories/study/vue-experiance/vue-experiance_9-30.md

40. 폼 입력 바인딩

1. 기본 사용법

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다.
입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다.
약간 이상하지만 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 syntax sugar이며 일부 경우에 특별한 주의를 해야합니다.

v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에대해 서로 다른 이벤트를 전송합니다.

• input type="text"와 textarea 태그는 value 속성과 input 이벤트를 사용합니다.
• 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용합니다.
• select 태그는 value를 prop으로, change를 이벤트로 사용합니다.

2. 문자열

• 예시 링크

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

3. 여러줄을 가진 문장

• 예시 링크

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

4. 체크박스

• 예시 링크

하나의 체크박스는 단일 boolean 값을 가집니다.

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

여러개의 체크박스는 같은 배열을 바인딩할 수 있습니다.

<template>
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>체크한 이름: {{ checkedNames }}</span>
</div>
</template>

<script>
export default {
    data() {
        return {
            checkedNames: []
        }
    }
}
</script>

5. 라디오

• 예시 링크

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

6. 셀렉트

• 예시 링크

하나의 셀렉트

<template>
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>선택함: {{ selected }}</span>
</template>

<script !src="">
export default {
    data() {
        return {
            selected: '',
        }
    }
}
</script>

다중 셀렉트 (배열을 바인딩 합니다)

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

v-for를 이용한 동적 옵션 렌더링

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

<script>
export default {
    data() {
        return {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    }
}
</script>

7. 값 바인딩하기

• 예시 링크

라디오, 체크박스 및 셀렉트 옵션의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크 박스의 boolean)입니다.

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

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

<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

그러나 때로 값을 Vue 인스턴스에 동적 속성에 바인딩해야 할 수 있습니다.
v-bind를 사용할 수 있습니다.
v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩할 수도 있습니다.

8. 체크박스

• 예시 링크

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'

9. 라디오

• 예시 링크

<input type="radio" v-model="pick" v-bind:value="a">

// when checked:
vm.pick === vm.a

10. select options

• 예시 링크

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// when selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123

11. Modifiers

11.1 .lazy

• 링크

기본적으로 v-model은 각 input 이벤트 후 데이터와 입력을 동기화합니다.(위에서 설명한 IME 구성 제외)
change 이벤트 후에 동기화하도록 lazy 수정자(modifier)를 추가할 수 있습니다.

<!-- synced after "change" instead of "input" -->
<!-- input 대신 change 이후에 동기화 -->
<input v-model.lazy="msg">

11.2 .number

• 링크

사용자 입력값이 자동으로 Number 타입으로 변환되도록 하려면 v-model 입력에 number 수정자(modifier)를 추가할 수 있습니다.

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

type="number"인 경우에도 HTML input 요소의 값이 항상 문자열을 반환하기 때문에 이 기능은 종종 유용합니다.
값을 parseFloat()로 구문 분석할 수 없으면 원래 값이 반환됩니다.

11.3 .trim

• 링크

사용자 입력의 공백이 자동으로 trimming되도록 하려면 v-model 입력에 trim 수정자(modifier)를 추가할 수 있습니다.

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

12. v-model with Components

HTML의 기본 제공 입력 유형이 항상 요구 사항을 충족하는 것은 아닙니다.
다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의된 동작으로 재사용 가능한 입력을 빌드할 수 있습니다.
이러한 입력은 v-model에서도 작동합니다.

자세히 알아보려면 컴포넌트 가이드에서 사용자 지정 inputs에 대해 읽어보세요.