[VueJS] checkbox 사용 및 활용 방법 (ft. v-model를 활용한 checkbox 사용)

vueJs에서 checkbox를 사용하는 방법에 대해 알아보자.

 

checkbox를 쓸때는 checkbox에 값을 넣어두고 체크여부에 따라 값을 가져오고는 하는데

vueJs에서는 신기하게도 값을 알아서 넣어준다.

 

코드를 통해 접근해보자.

 

▷ html

<div id='app'>
  <input type="checkbox" v-model="arr" value="mine">mine
  <input type="checkbox" v-model="arr" value="it">it
  <input type="checkbox" v-model="arr" value="record">record
  <button @click='checkArr()'>check</button>
</div>

 

▷ script

new Vue({
    el: '#app',
    data: {
        arr : []
    },
    methods : {
      checkArr : function() {
        console.log(this.arr);
      }
    }
});

 

이런식으로 구성되어있다면 어떤식으로 작동할까?

일단 화면구성은 아래와 같다.

 

초기화면

 

이 상태의 화면에서 아래와 같이 몇개를 체크해보고 'check' 버튼을 눌러보자.

 

 

▶ 결과

---

저런식으로 v-model로 연결되어있는 배열에 차곡차곡 쌓이게 된다.

물론 선택한 순서대로 삽입되며 당연하게도 체크를 해제하게 되면 알아서 배열에서 빠져나간다.

 

vueJs에서 checkbox를 사용할때 이런식으로 하나의 배열을 바라보게 하여 v-model을 사용하게 되면 쓸데없이 jquery를 사용하여 체크된것들의 값들을 뽑아서 다시 넣어주는 불필요한 행위는 할 필요가 없다.

 

하나 주의할 점은 저 상태의 checkbox를 prop같은것을 통해 강제로 체크상태를 제어하게되면 값이 배열에 들어가질 않는다.