Front-end/Vue.js

[가이드] 폼 입력 바인딩 - 필수요소 | Vue

AGAL 2020. 8. 14. 15:12
반응형

기본 사용법

v-model 지시문을 사용하여 폼 요소(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 만들 수 있습니다. 입력 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다.

 

v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. data구성 요소 의 옵션 내에서 JavaScript 측의 초기 값을 선언해야 합니다.

 

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

 

  • text 및 textarea 요소는 value 속성과 input 이벤트를 사용합니다 .
  • 체크 박스와 라디오 버튼은 checked 속성과 change 이벤트를 사용합니다 .
  • 선택 필드 value는 소품 및 change 이벤트로 사용됩니다 .

 

IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다.

 

Text

<div id="app">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
  new Vue({ 
    el: '#app', 
    data: {
      message: '' 
    } 
  });
</script>

 

여러 줄 Text

<div id="app">
  <textarea v-model="message2" placeholder="add multiple lines"></textarea>
  <strong>여러 줄 입력:</strong>
  <p style="white-space: pre-line;">
    {{ message2 }}
  </p>
</div>

<script>
  new Vue({ 
    el: '#app', 
    data: {
      message: '' 
    } 
  });
</script>
텍스트 영역(<textarea>{{text}}</textarea>)에 대해 작동하지 않습니다. 대신 v-model 을 사용합니다.

 

Checkbox

하나의 checkbox (boolean 값을 가집니다) :

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

<script>
  new Vue({
    el: '#app',
    data: {
      checked: false
    }
  })
</script>

 

여러 개의 checkbox (배열 값을 가집니다) :

<div id="app">
  <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>Checked names: {{ checkedNames }}</span>
 </div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkedNames: []
    }
  })
</script>

 

Radio

<div id="app">
  <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: {{ picked }}</span>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

 

Select

하나의 select :

<div id="app"> 
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  })
</script>
v-model 식의 초기 값이 옵션과 일치하지 않으면 <selection> 요소가 "선택되지 않은" 상태로 렌더링됩니다. iOS에서는 iOS가 change 이벤트를 실행하지 않기 때문에 사용자가 첫 번째 항목을 선택할 수 없습니다. 따라서 위의 예에서 설명한 대로 disabled 옵션을 빈 값으로 제공하는 것이 좋습니다.

 

여러 개의 select (배열에 바인딩) :

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

<script>
  new Vue({ 
    el: '#app',
    data: { 
      selected: [] 
    } 
  });
</script>

v-for을 사용한 동적 option 렌더링 :

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

<script>
  new Vue({
    el: '#app',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
</script>

 

 

값 바인딩하기

라디오, 체크박스, 셀렉트 옵션의 경우, 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>

v-model에 동적으로 값을 바인딩 해야 할 경우가 있습니다. 이 때 v-bind를 사용하면 됩니다. v-bind를 사용하면 입력 값이 문자열이 아닌 값도 바인딩 할 수 있습니다.

checkbox :

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

<script>
  // when checked:
  vm.toggle === 'yes'
  // when unchecked:
  vm.toggle === 'no'
</script>
true-value와 false-value는 input의 value에 영향을 미치지 않기 때문에 브라우저의 form의 submit에 포함되지 않습니다.

 

Radio :

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

<script>
  // when checked:
  vm.pick === vm.a
</script>

 

select option :

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

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

 

 

수식어

.lazy

기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 합니다. (단 앞에서 설명한 IME 구성은 제외됩니다.) .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.

<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >

 

.number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

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

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있습니다. parseFloat()를 사용하여 값을 구문 분석할 수 없는 경우 원래 값이 반환됩니다.

 

 

.trim

v-model이 관리하는 input을 자동으로 trim 하기 원하면, trim 수정자를 추가하면 됩니다.

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

 

v-model 과 컴포넌트

Vue의 컴포넌트에 익숙하지 않으면 지금은 보지 않아도 괜찮습니다.

HTML의 기본 제공 input 유형이 항상 사용자의 요구를 만족시킬 수는 없습니다. 다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의 된 동작으로 재사용 가능한 input을 만들 수 있습니다. 이 input은 v-model에도 작동합니다! 자세한 컴포넌트 가이드의 사용자 정의 입력을 참조하십시오.

반응형