Vue3 데이터바인딩(양방) v-on:input 사용 예제

 let updateName =(e)=>{//event 객체를 받아올때
 console.log(e.target.value)
 }

updateName이라는 함수를 생성하여 input박스에 v-on:input의 함수로 사용하였다

<input type="text" :value="name" @input="updateName">

 

함수에 콘솔로 이벤트 객체의 타겟 밸류를 로그로 확인이 가능한데

이렇게 무언가 칠때마다 로그가 갱신되는것으르 볼 수 있다

 

그렇다면 이전 포스트에서 못다한 인풋상자와 텍스트박스의 값을 동일하게 연계시킬 수 있다

 let updateName =(e)=>{//evebt 객체를 받아올때
  name.value=e.target.value;

 }

콘솔로만 찍던 값을 name.value (ref값을 바꿀때는 .value가 필수이다)로 저장해주면 

 

 

완성이다

---

하지만

단순히 Vue에는 이 기능을 자체적으로 지원하는데

v-model 이다

 

<template>
<div class ="container">
<div class="name">{{name}}</div>

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

<button class="btn btn-primary" @click="Submit">
  버튼
</button>

</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let name= ref("bbakssang");

  
  var  Submit = ()=>{
  }


  return {
    name,Submit,
  }; 
}
}
</script>

위에서 잔뜩 적었던 updateName 함수를 싹 지우고

input안의 v-on 대신 v-model로 변경하여도 동일한 결과를 얻을 수 있다.