Vue에서 v-model의 동작방식에 대해 (v-model, :value, @input...)

Vue에서 템플릿과 스크립트 간 데이터 양방향 바인딩을 위해 

아래와 같이 "v-model" 를 사용한다.

<textarea v-model="something"></textarea>

 

따라서, 이 textarea에 작성되는 값이 "something"이라는 변수에 반영이 되고,

반대로 "something" 변수의 값이 변경되면 이 textarea가 갖는 value도 변경이 된다.

 

이 v-model은 기본적으로 다음과 같다:

<textarea :value="something" @input="something = $event.target.value"></textarea>

:value - 데이터 바인딩. "something" 이라는 변수의 값을 textarea의 value로 설정한다.

@input - 이벤트 바인딩. 이 textarea에서 input 이벤트가 발생하면 설정해준 "something = $event.target.value" 코드를 실행한다.

 

만일 v-model 대신 :value를 작성하면 "something" 변수의 값을 가져오는 단방향 바인딩만 수행하고 @input 이벤트 발생시 somthing의 값을 설정하지 않는다.

 

---

 

간혹 아래와 같이 중첩된 Object내의 값이 설정되지 않았는데 이를 v-model의 대상으로 삼으려고 하는경우,

이는 undefined 에러의 원인이 된다.

<textarea v-model="outerObj.innerObj.value"></textarea>

 

따라서 아래와 같이 값 바인딩과 이벤트 바인딩을 분리하여 각각 설정해주어야 할 상황이 생기기도 한다.

<textarea :value="outerObj?.innerObj?.value" @input="outerObj.innerObj.value = $event.target.value"></textarea>

 

 

 

 

---

#References

https://stackoverflow.com/questions/62498743/one-way-binding-for-a-textarea-in-vue-js-safe-to-use-value

One-way binding for a textarea in vue js - safe to use `:value`?