[Vue] 데이터 양방향 처리 (v-model)

저번 시간에는 v-if, v-show 를 통해 데이터를 조건부 처리하는 방법을 배웠다

https://co-de.tistory.com/130

[Vue] 데이터 조건부 처리 (If-Else, Show)

이번 시간에는 데이터 양방향 처리를 하는 실습을 진행하도록 한다!

양방향 처리 라는 단어를 들었을시 어렵게 느껴지지만 예를 듣고나면 어렵지 않은 개념이다.

글자를 입력시마다 화면에 실시간으로 표기하도록 하는것이 양방향 처리며 (vue 인스턴스 <-> template)

반대인 단방향 처리의 예시는 state 를 이용해 정의한 데이터를 받아 화면에 표기하는 것이다.(vue 인스턴스 > template)

이제 양방향 처리가 무엇인지 감을 잡았다면 아래 실습을 진행 해보자!

TwowayBinding.vue

<template>
    <div>
        <h1>{{title}}</h1>
        <input v-model="title">
        <br><br>
    </div>
    <div>
        <input type="checkbox" id="checkbox-A" value="A" v-model="checkModel">
        <label>A</label>
        <input type="checkbox" id="checkbox-B" value="B" v-model="checkModel">
        <label>B</label>
        <input type="checkbox" id="checkbox-C" value="C" v-model="checkModel">
        <label>C</label>
        <br><br>
        <span> Checked : {{checkModel}}</span>
    </div>
    <div>
        <input type="radio" id="radio-A" value="A" v-model="radioModel">
        <label>A</label>
        <input type="radio" id="radio-B" value="B" v-model="radioModel">
        <label>B</label>
        <input type="radio" id="radio-C" value="C" v-model="radioModel">
        <label>C</label>
        <br><br>
        <span>Checked : {{radioModel}}</span>
    </div>
    <div>
        <select v-model="selectModel">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br><br>
        <span>Checked : {{selectModel}}</span>
    </div>
</template>

<script>
    export default {
        name: "TwowayBinding",
        data(){
            return {
                title : "데이터를 입력 하시오",
                checkModel: ["A"],
                radioModel: "A",
                selectModel: "A"
            }
        }
    }
</script>

<style scoped>

</style>

v-modle 의 값을 동일하게 맞추어 하나의 모델임을 정의하고

해당 모델은 state값에 정의하여 사용해야 하므로 data 함수에 정의하고 기본값을 셋팅 하도록 한다.(기본값은 셋팅은 필수가 아니며 테스트를 위해 임의로 셋팅 하였다.)

그리고 input 박스, 체크박스, 라디오박스, 셀렉트 박스 모두 정의한다. (check box 는 여러개 선택 가능하므로 Array 형태로 사용 한다.)

 최상위 컴포넌트 App.vue 에 import 한다.

<template>
  ..
  <TwowayBinding/>
</template>

<script>
  ...
  import TwowayBinding from "@/components/TwowayBinding";

export default {
  name: "app",
  components: {
   ...
    TwowayBinding
  },
  data(){
    return {
      r...
    }
  }
}
</script>

<style>
  ...
</style>

실행해보면 아래와 같이 default 값이 정상적으로 적용됨을 확인할 수 있으며

변경이 이뤄졌을때 정상적으로 반영 된다.