v-model
v-model을 통해 양방향 바인딩을 시키자


<h2>
  input value
</h2>
<input type="text" :value="inputValue" @input="changeInput" />
<input v-model="inputValue" />
<p>{{ inputValue }}</p>


let inputValue = ref('hello');

위에서 :value는 vue에서 선언한 데이터를 <input>엘리먼트로 바인딩한다는 것이다. 즉, 단방향바인딩을 말한다.
vue에서 선언한 데이터의 값이 변화된다면 <input>엘리먼트의 값이 변한다.
하지만 <input>엘리먼트를 통하여 vue에서 선언한 데이터의 값을 변경할 수가 있지만 일반적인 경우로 변경할 수 없다.



예를들어, 아래의 코드를 선언하면 inputValue의 값이 바뀐다

const changeInput = () => {
  inputValue.value += '!';
}

하지만 입력할때마다 !가 붙는 경우는 일반적인 경우가 아니고 사용자가 입력한 값을 가져와야하는데, 이때 기본파라미터인 event를 통해 가져올 수 있다.

const changeInput = (event) => {
  inputValue.value = event.target.value;
}

하지만 이와 같은 과정은 너무 복잡하다. 이를 단순하게 작업해준것이 v-model이다

<input v-model="inputValue" />

이와 같이 v-model은 <input>과 <textarea> 경우, value 속성과 input 이벤트를 사용합니다.
<input type="checkbox">과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용합니다.
<select>는 value를 속성으로 사용하고 change를 이벤트로 사용합니다.

참고자료: vue3 공식문서 - form, Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...