[Vue3] 10. Form 입력 바인딩

김관응·2023년 4월 10일

vue

Vue

목록 보기

11/14

화면에서 데이터를 처리할 때 엘리먼트의 상태와 자바스크립트의 상태가 동기화가 되야하는 경우가 많다.
이럴 때 값을 수동으로 연결하고 이벤트리수너를 통해 변경하는것은 번거롭다.

이럴 떄 v-model 디렉티브는 단순화 하는데 도움을 준다.

기본 사용법

텍스트

<template>
 <p>메세지 내용: {{ message }}</p>
 <input v-model="message" placeholder="메세지 입력하기" />
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

imput에 입력을 하면 바인딩된 message값이 변경되고 바로 위 p태그에 뿌려지게 된다.

여러 줄 텍스트

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

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

여러줄을 표현할 때 textarea 안에 {{message}} 로 표현하는것은 동작하지 않아 주의 해야한다.

체크박스

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

<script setup>
import { ref } from 'vue'

const checked = ref(true)
</script>

체크박스는 부울린값을 사용하기 때문에 true, false로 표현된다.

하나의 배열에 여러개의 체크박스 값을 담아 표현할 수 있다.

<template>
  <div>체크된 이름: {{ checkedNames }}</div>

  <input type="checkbox" id="demo-jack" value="젝" v-model="checkedNames">
  <label for="demo-jack">젝</label>

  <input type="checkbox" id="demo-john" value="존" v-model="checkedNames">
  <label for="demo-john">존</label>

  <input type="checkbox" id="demo-mike" value="마이크" v-model="checkedNames">
  <label for="demo-mike">마이크</label>
</template>

<script setup>
import { ref } from 'vue'

const checkedNames = ref([])
</script>

라디오버튼

<template>
  <div>선택한 것: {{ picked }}</div>

  <input type="radio" id="one" value="하나" v-model="picked" />
  <label for="one">하나</label>

  <input type="radio" id="two" value="둘" v-model="picked" />
  <label for="two">둘</label>
</template>

<script setup>
import { ref } from 'vue'

const picked = ref('하나')
</script>

라디오버튼의 value 값으로 바인딩이 된다.

셀렉트

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

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

드롭다운으로 나오는 옵션 중 선택한 값으로 바인딩이 된다.

select에 muliple 옵션을 주면 드롭다운이 아니라 옵션을 나열할 수 있다.

<template>
  <div>선택됨: {{ selected }}</div>
  
  <select v-model="selected" multiple
>
    <option>가</option>
    <option>나</option>
    <option>다</option>
  </select>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

배열과 v-for를 통해 select를 랜더링할 수 있다.

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

	<div>선택됨: {{ selected }}</div>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('1')

const options = ref([
  { text: '하나', value: '1' },
  { text: '둘', value: '2' },
  { text: '셋', value: '3' }
])
</script>

나열해야할 값이 많거나 동적인 경우 배열에 담나옿고 v-for로 랜더링할 수 있다.

동적 값 바인딩

인스턴스의 속성을 정적인 값이 아닌 동적으로 표현하는 방법이 있다.

체크박스

<template>
  <input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />
</template>

<script setup>
import { ref } from 'vue'

const toggle = ref('')
const dynamicTrueValue = ref('동적참값')
const dynamicFalseValue = ref('동적거짓값')
</script>

체크박스에 들어가는 값이 true, false가 아닌 동적 값을 담을 수 있다.

라디오버튼

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

라디오버튼 또한 동적으로 값을 할당할 수 있다.

셀렉트

<select v-model="selected">
  <!-- 인라인 객체 리터럴 -->
  <option :value="{ number: 123 }">123</option>
</select>

셀렉트 또한 동일하다.

v-model은 문자열이 아닌 앖도 지원한다.

수식어

.lazy

<template>
  <div>.lazy example</div>
  <!-- "input" 대신 "change" 이벤트 후에 동기화됨 -->
  <input v-model.lazy="msg" /><br>
  메세지 : {{msg}}
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')
</script>