[Vue] 폼 입력 바인딩 (@input, :value vs v-model)

⚠️ 이 포스팅은 Vue3(한국어): 폼 입력 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

폼 입력 요소(input, textarea, select)에는 사용자가 입력한 값을 받기 위해 양방향 데이터 바인딩을 생성해주어야 한다. 여기서 양방향 데이터란 데이터값이 바뀌었을때 해당 데이터를 사용하고 있는 모든 곳에 변경된 데이터로 업데이트 해주는 것을 말한다. 저장된 데이터와 그 데이터를 사용하는 곳이 양방향으로 연결되어있어 양방향 데이터라고 부른다. input, textarea, select 요소로 사용자가 입력한 값을 받아 반영하고 싶을때 3가지 방법이 있다.

 

1. 메서드

메서드를 사용해 사용자가 입력한 input 값을 받아오기

<template>
  <h1>{{ msg }}</h1>
  <input type="text" :value="msg" @input="hanlder" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
  methods: {
    hanlder(event) {
      console.log(event.target.value);
      this.msg = event.target.value;
    },
  },
};
</script>

 

2. 인라인

메서드를 사용하지 않고 인라인으로 사용자가 입력한 input 값을 받아오기

<template>
  <h1>{{ msg }}</h1>
  <input type="text" :value="msg" @input="msg = $event.target.value" />
  <h1>{{ hangul }}</h1>
  <input type="text" :value="hangul" @input="hangul = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
      hangul: '헬로우 월드',
    };
  },
};
</script>

 

3. v- model

v-model로 사용자가 입력한 input 값을 받아오기

• v-model: 사용자 입력 이벤트에 대한 데이터를 업데이트시켜주는 디렉티브

<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model="msg" />
  <h1>{{ checked }}</h1>
  <input type="checkbox" v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
      checked: false,
    };
  },
};
</script>

 

v-model 사용시 주의점

v-model로 한글을 입력하면 한박자씩 늦게 출력된다. 한글 데이터를 양방향 데이터로 연결할때는 실시간으로 데이터값이 변경될 수 있도록 method를 사용하거나 inline 방식을 사용해준다.

 

v-model과 한글 데이터

v-model을 사용해 한글을 출력하면 한박자씩 느리다.

<template>
  <h1>{{ hangul }}</h1>
  <input type="text" v-model="hangul" />
</template>

<script>
export default {
  data() {
    return {
      hangul: '헬로우 월드',
    };
  },
};
</script>

 

event 객체와 한글 데이터

한글데이터를 양방향 데이터로 연결해주고 싶다면 event 객체를 사용해 해당 데이터에 접근해야 한다.

<template>
  <h1>{{ hangul }}</h1>
  <input type="text" :value="hangul" @input="hangul = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      hangul: '헬로우 월드',
    };
  },
};
</script>