[vue] Form 입력 바인딩 (v-model)

폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많습니다.

값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업이다.

v-model

1) v-bind:value + v-on:input 으로  1 -> 2 처럼 단순화 할수 있음

 <!--1--> 
 <input :value="text1" @input="event=>text1=event.target.value">
 <input :value="text1" v-on:input="onInput">
 <!--2--> 
 <input v-model="text1" >
  {{text1}}
  
  export default {
  name: 'App',
  data(){
    return {
      text1:'',
    }
  },
   methods:{//함수
      onInput(e){
       //v-on 핸들러는 네이티브 DOM 이벤트를 이자로 받는다
        this.text1=e.target.value
      }
   }
  }

2)  input, textarea, select 엘리먼트에 사용가능

    용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장된다

• 텍스트 유형의 <input>과 <textarea> 경우, value 속성과 input 이벤트를 사용합니다.
• <input type="checkbox">과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용합니다.
• <select>는 value를 속성으로 사용하고 change를 이벤트로 사용합니다.

- textarea

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

  data(){
    return {
      text2:'',
    }
  },

 

- 체크박스

<!--단일 체크박스는 불리언을 값을 사용합니다-->
<input type="checkbox" id="chk1" v-model="checked1" />
<label for="chk1">{{ checked1 }}</label>

<!--배열 또는 Set에 여러 개의 체크박스 값을 바인딩-->
<div>체크된 이름: {{ checkNames }}</div>
<input type="checkbox" id="jack" value="잭" v-model="checkNames">
<label for="jack">잭</label>
<input type="checkbox" id="john" value="존" v-model="checkNames">
<label for="john">존</label>
<input type="checkbox" id="mike" value="마이크" v-model="checkNames">
<label for="mike">마이크</label>

<!--true-value 및 false-value 속성은 v-model을 사용하는 경우에만 작동하는 Vue 전용 속성-->
<div>선택됨: {{ toggle }}</div>
<input type="checkbox" v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

  
  data(){
    return {
      checked1:false,
      checkNames:[],
      toggle: '네',
      dynamicTrueValue:'네',
      dynamicFalseValue:'아니오',
    }
  },

- 라디오 

<!--v-model에 같은 데이터모델 바인딩-->
<!--라디오는 checked 속성을 v-model 사용하므로 value속성은 v-bind사용-->
<div>선택한 것: {{ picked }}</div>
<input type="radio" id="one" :value="first" v-model="picked" /> 
<label for="one">하나</label>
<input type="radio" id="two" :value="second" v-model="picked" />
<label for="two">둘</label>

  data(){
    return {
	 picked:'',
     first:'하나',
     second:'둘',
    }
  },

- 셀렉트

<!--단일-->
<div>선택됨: {{ selected1 }}</div>
<select v-model="selected1" @change="changeSelect">
 <option disabled value="">다음 중 하나를 선택하세요</option>
 <option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>

<!--다중 선택(배열로 바인딩 됨):-->
<div>선택됨: {{ selected2 }}</div>
<select v-model="selected2" multiple>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

 <!--v-model은 문자열이 아닌 값의 바인딩도 지원-->
<div>선택됨: {{ selected4 }}</div>
<select v-model="selected4">
  <!-- 인라인 객체 리터럴 -->
  <option :value="{ number: 123 }" >123</option>
</select>

data(){
 return {
  selected1:'',
  selected2:[],
  selected4:{},
  options: [
    { text: '하나', value: '1' },
    { text: '둘', value: '2' },
    { text: '셋', value: '3' }
  ]
 }
},
methods:{     //컴포넌트 내에서 사용될 메소드 정의
  changeSelect(){
    alert(this.selected1);
  }
},

 

참조)

https://v3-docs.vuejs-korea.org/guide/essentials/forms.html#checkbox