본문 바로가기
VueJS/VueJS

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

by 썸머워즈 2021. 8. 30.
반응형

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같은것을 통해 강제로 체크상태를 제어하게되면 값이 배열에 들어가질 않는다.

반응형


댓글

TOP