[Vue3] Form 입력 바인딩

1. v-model 디렉티브

• 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 작업을 단순화한다.
• <textarea> <select>에서도 사용 가능
• 사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장
  • 텍스트 유형의 <input> <textarea> : value 속성과 input 이벤트 사용
    • <input type="checkbox">과 <input type="radio"> : checked 속성과 change 이벤트 사용
  • <select> : value 속성과 change 이벤트 사용
• v-model은 문자열이 아닌 값의 바인딩도 지원한다. (3. 값 바인딩 - select 예제 참고)

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

<!-- v-model 통해 단순화 -->
<input v-model="text">

v-model은 모든 form 엘리먼트에서 감지되는 초기 value, checked, selected 속성값을 무시한다.
data 옵션을 통해 초기값 선언이 가능하다.

---

2. 기본 사용법

• checkbox 예제

<template>
  <p>checkedNames : {{ checkedNames }}</p>
  <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>
</template>

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

• select 예제

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

<script>
export default {
  name: 'App',
  data () {
    return {
      selected: ''
    }
  }
}
</script>

💡 v-model 표현식의 초기값이 옵션과 일치하지 않으면 <select> 엘리먼트가 선택되지 않은 '빈 상태'로 렌더링된다. iOS에서는 이 경우 변경 이벤트를 발생시키지 않기 때문에 첫번째 옵션에 <option disabled value="">를 제공하는 것이 좋다.

• v-for를 활용한 select 예제

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

<script>
export default {
  name: 'App',
  data () {
    return {
      selected: '1',
      options: [
        { text: '하나', value: '1' },
        { text: '둘', value: '2' },
        { text: '셋', value: '3' },
      ]
    }
  }
}
</script>

---

3. 값 바인딩

• v-model 디렉티브를 사용하면 라디오, 체크박스 및 셀렉트 옵션에 바인딩된 값은 문자열이다.

• 활성 인스턴스 동적 속성에 값을 바인딩하고 싶으면 v-bind를 사용하면 된다. (문자열이 아닌 값에 바인딩 가능)

• checkbox - 정적인 값 바인딩 예제

<template>
  <form @submit.prevent="submitForm()">
    <input
    type="checkbox"
    id="check"
    v-model="toggle"
    true-value="네"
    false-value="아니오" />
    <label for="check">체크박스</label>
    <button type="submit">button</button>
  </form>
</template>

<script>
export default {
  name: 'App',
  methods: {
    submitForm() {
      console.log(this.toggle);
    }
  }
}
</script>

• checkbox - 동적인 값 바인딩 예제

<template>
  <form @submit.prevent="submitForm()">
    <input
    type="checkbox"
    id="check"
    v-model="toggle"
    :true-value="dynamicTrueValue"
    :false-value="dynamicFalseValue" />
    <label for="check">체크박스</label>
    <button type="submit">button</button>
  </form>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dynamicTrueValue: true,
      dynamicFalseValue: false
    }
  },
  methods: {
    submitForm() {
      console.log(this.toggle);
    }
  }
}
</script>

💡 브라우저는 폼 제출 시 체크되지 않은 상자는 포함하지 않기 때문에 true-value와 false-value 속성은 입력의 value 속성에 영향을 주지 않는다. 두 값 중 하나가 폼으로 제출되도록 하려면 라디오로 구현해야 한다.

• radio 예제

<template>
  <form @submit.prevent="submitForm()">
    <input type="radio" name="pick" v-model="pick" :value="first" />
    <span>first</span>
    <input type="radio" name="pick" v-model="pick" :value="second" />
    <span>second</span>
    <button type="submit">button</button>
  </form>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      first: 'first',
      second: 'second',
    }
  },
  methods: {
    submitForm() {
      console.log(this.pick);
    }
  }
}
</script>

• select 예제
  • selected는 객체 값으로 설정되고 있다.

<template>
  <div>{{ selected }}</div>
  <select v-model="selected">
    <option disabled value="">값을 선택하세요.</option>
    <option :value="{ number: 123 }">123</option>
    <option :value="{ number: 234 }">234</option>
    <option :value="{ number: 345 }">345</option>
  </select>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      selected: {}
    }
  }
}
</script>

---

4. 수식어

• .lazy
  • 기본적으로 v-model은 input 이벤트 이후 데이터 입력을 동기화한다. .lazy 수식어를 사용하면 input 이벤트가 아닌 change 이벤트 이후 데이터 입력을 동기화한다.

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

• .number
  • 사용자 입력이 숫자로 변환
  • <input> 엘리먼트에 type="number"가 있으면 .number 수식어가 자동으로 적용
  • 값을 parseFloat()으로 파싱할 수 없으면 원래 값 적용

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

• .trim
  • 사용자 입력의 공백 트리밍

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