[v-model] 자동 바인딩 : input입력 값 변수에 자동 저장하기

 

이 게시물에서는 v-model을 활용하여 사용자가 input에 입력한 내용을 변수에 자동으로 바인딩하는 방법에 대해 다룬다. 목차는 아래와 같이 하였다.

1. v-model?
2. 예시
3. 번외

 

---

 

1. v-model?

v-model은 데이터 바인딩을 쉽게 구현할 수 있도록 vue에서 제공하고 있는 디렉티브이다. 

 

데이터 바인딩이 무엇이냐? binding은 묶다, 결박하다 등의 의미로 사용되는 영단어이다. data binding이라 하면 쉽게 말해, 화면 요소와 객체 데이터를 묶어서 동기화 시키는 기법이라고 설명할 수 있다.

 

어떠한 상태 변화에 따라 화면이 실시간으로 자동 업데이트 되어야한다거나, 사용자에게 실시간으로 반응하는 어플리케이션이 필요하다거나 등의 여러 상황에서 데이터 바인딩이 활용된다.

 

특정 데이터가 클릭될때마다 사용자가 입력한 input요소의 값을 어떠한 객체에 저장한다고 하자. 이때, 버튼요소의 이벤트 핸들링과 input요소 값을 객체에 저장하는 부분까지의 로직을 작성해야한다면, 그 코드는 그리 복잡하지는 않지만 요소가 많을때는 굉장히 번거로울 수 있다.

 

물론 Vue에서는 v-on과 v-bind를 활용하여 비교적 간단하게 구현할 수 있겠지만, 그럼에도 간단한 로직을 서술해야한다는 부분은 변하지 않는다.

 

이런 불편함을 v-model하나만으로 개선할 수 있다.

 

---

 

 

2. 예시

html요소에 v-model 디렉티브를 사용해주는 것으로 간단히 사용 가능하다. 

<input v-model="inputText">

 

이때 디렉티브의 값으로 입력될 내용은 해당 컴포넌트에 존재하는 객체여야한다.

export default {
	name: "BindingTestView",
    
    data(){
    	inputText:'' //값을 입력하여, 초기값을 설정할수도 있다.
    }
}

 

예시 화면은 아래와 같다.

데이터 바인딩 예시

 

 

 

 

---

 

 

3. 번외

v-model은 단일 객체에 한하여 바인딩 되기 때문에, 한개의 상태 변화로 두개의 model과 바인딩될 수는 없다. 본인의 경우는 input요소 한개의 상태변화 값이 두개의 객체에 적재되어야하는 상황이었다. 이 부분을 해결하기 위해 작성한 코드를 아래에 첨부하였다.

<input v-on="bindUserInputValue($event)">

 

export default {
  name: "FrequencyView",

  data(){
    return{
    	leak_size:[{input_value:''},{input_value:''}]
    }
  }
  
  methods: {
    /*
     * 함수명 : user_input값 바인딩
     * 반  환 : 사용자의 user_input요소 입력값
     * 인  자 : $event
     * 설  명 : 한개의 input요소에 입력된 값을 두개의 객체에 바인딩할 목적으로 작성함.
     			함수 선언마다, leak_size.input_value객체에 이벤트 value를 할당시킴.
     */
    bindUserInputValue(event) {
      this.leak_size[0].input_value=event.target.value;
      this.leak_size[1].input_value=event.target.value;
    },
   }
}

 

 

위 코드를 실행시키면 예시 목차에서 공유한 gif파일과 달리 chrome브라우저의 vue상태 조회 옵션으로 객체 값이 실시간으로 변환되지는 않는다. 하지만 이것은 브라우저 라이브러리에만 그렇게 보일 뿐, 실제로는 화면의 상태변화에 따라 객체의 값은 잘 변동되고 있다.

 

---

 

 

해당 게시물은 아래 링크를 참조하여 작성되었다.

https://joshua1988.github.io/web-development/vuejs/v-model-usage/

v-model의 동작 원리와 활용 방법