[vue.js] checkBox all select(전체 선택) computed get/set 제어

서론

vue.js 개발하면서 자주 사용하는 checkBox 전체선택을 쉽게 정리하기 위해 정리합니다.

소스

vue

<template>
  <div id="example-3">
    수신동의 :
    <input type="checkbox" value="all" v-model="allSelected" />
    <label for="all">전체</label>
    <template v-for="(item, index) in checkList">
      <input
        type="checkbox"
        :id="item"
        :value="item"
        v-model="selectList"
        :key="index"
      />
      <label :for="item" :key="index + '1'"> {{ item }}</label>
    </template>
    <br />
    <span>check: {{ selectList }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: ["e-mail", "SMS", "test1"],
      selectList: [],
    };
  },
  computed: {
    allSelected: {
      //getter
      get: function() {
        return this.checkList.length === this.selectList.length;
      },
      //setter
      set: function(e) {
        this.selectList = e ? this.checkList : [];
      },
    },
  },
};
</script>

설명

data : checkList 와 사용자가 선택한 selectList

computed : 전체선택 allSelected 를 get/set 으로 설정.

get은 checkList와 selectList의 길이가 같으면 true, 그외는 false로 전체선택 checkBox를 제어한다.

set은 사용자가 선택한 selectList 데이터에 true일때는 checkList 를 set, 그외는 [](빈값) 을 set한다.

테스트

 

 

* 테스트 소스 : https://github.com/hjh830827/test-project1

CheckBoxAllSelect.vue에서 확인 가능합니다.

 

 

* 질문 내용 checkbox disabled 적용