vue form 에 쓰는 v-model

<input id="user-name" name="user-name" type="text" v-model="userName"/>

<input id="age" name="age" type="number" v-model="userAge" ref="ageInput"/>

 <input id="interest-news" name="interest" type="checkbox" value="News" v-model="interest"/>
 <input id="interest-tutorials" name="interest" type="checkbox" value="Tutorials" v-model="interest" />
 <input id="interest-nothing" name="interest" type="checkbox" value="Nothing" v-model="interest" />

<input id="how-video" name="how" type="radio" value="Video" v-model="how" />
<input id="how-blogs" name="how" type="radio" value="Blogs" v-model="how" />
<input id="how-other" name="how" type="radio"  value="Other" v-model="how"/>

위에서 부터 차례대로  input박스  체크박스 라디오박스

 

해당하는 데이터처리 

 

<script>
export default {
  data() {
    return {
      userName:'',
      userAge: null,
      referrer:'wom',
      interest:[],
      how:null,
    };
  },
 </script>

참고사항:

ref으로 숫자를 받을 시
문자로 받아짐!

v-model.lazy
v-model.number
v-model.trim 
각각 기능도 알아두면 좋음

체크박스가 여러개면 배열로
체크박스가 하나면 참 거짓으로

---

특정 상황일때 클래스를 불러와서 적용시킬 수 있음

    <div class="form-control" :class="{invalid : userNameValidity === 'invalid'}">
      <label for="user-name">Your Name</label>
      <input id="user-name" name="user-name" type="text" v-model="userName" @blur="validateInput"/>
    <p v-if="userNameValidity === 'invalid'">enter name</p>
    </div>
    
<script>
export default {
  data() {
      userNameValidity:'pending'
    };
  },

  methods : {
      validateInput() {
        if(this.userName === ''){
          this.userNameValidity = 'invalid'
        }
      }
    }
}
</script>