Vue - " v-model " 정리

v-model이란

폼 입력 요소와 Vue 데이터를 양방향으로 바인딩해주는 디렉티브다.

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

내부적으로는 이렇게 동작한다.

<input type="text" @input="name = $event.target.value" />

즉, 이벤트 핸들러 함수를 따로 만들 필요가 없다.

---

여러 input이 있을 때

<input type="text" v-model="num1" />
<input type="text" v-model="num2" />

각 input은 자기 데이터에만 연결되어 있다. num1 input에서 이벤트가 발생하면 num1만 바뀌고 num2는 그대로다. 이벤트 핸들러를 따로 만들 필요 없다.

---

v-model 수식어

.lazy

기본 v-model은 input 이벤트(타이핑할 때마다)로 데이터를 업데이트한다. .lazy를 붙이면 change 이벤트(포커스를 잃었을 때)에만 업데이트한다.

<input type="text" v-model.lazy="num" />

.number

입력값을 숫자로 형변환한다. 형변환이 불가능하면 원래 값을 유지한다.

<input type="text" v-model.number="num" />

.trim

입력값의 앞뒤 공백을 제거한다. 단어 사이 공백은 제거하지 않는다.

<input type="text" v-model.trim="name" />

"  홍 길 동  "  →  "홍 길 동"

---

주의사항

setup()에서 선언한 데이터는 반드시 return해야 템플릿에서 사용할 수 있다. return에 없으면 v-model로 연결해도 동작하지 않는다.

setup() {
  const num1 = ref(0);
  const num2 = ref(0);

  return {
    num1,
    num2,  // return 안 하면 템플릿에서 접근 불가
  };
}