[Vue] checkBox 최대 개수

hidden_·2022년 8월 9일
0

Vue

목록 보기
1/1

checkbox 최대 갯수 지정하기

 <b-form-checkbox :value="goods.ad_goods.ad_goods_code"
                      :disabled="checked.length >= 3 && !checked.includes(goods.ad_goods.ad_goods_code)" @change="
                      countChck($event, goods.ad_goods.ad_goods_code)">
                      {{ goods.ad_goods.name }}
                    </b-form-checkbox>

api 로부터 받아온 객체 형태인데, 상품 코드값으로 상품을 관리합니다. 서칭해본 자료에는 반복을 이용하여 index값을 활용하는데, 반복을 이용하기에는 한계가 있었습니다.

따라서 코드값을 담고있는 checked 배열을 만들어, 상품의 코드값의 check 여부를 관리하도록 햇습니다.

checked라는 data를 만들어, 그 안에 code값을 push 하고,
checked 속성의 true false 값을 이용하여 해당 checkbox의 value가 checked 배열에 있는지 여부를 확인한 후, 있다면 필터링을 진행하는 로직으로 구현했습니다.

data: () => ({
    checked: [],
  }),
methods: {
    countChck(e, value) { 
      // e는 해당 checkbox의 상태가 true인지 false 인지 여부, 
      // value는 code의 값을 매개변수로 넘어주도록 함 
      if (e === false) {
        
        //filter를 사용하면 자동으로 배열 형태로 return 
        const filter = this.checked.filter(el => el !== value);
        this.checked = filter;
      }
      else {
        if (this.checked.length < 3)
          this.checked.push(value)

      }
    },
  }
profile
steady

0개의 댓글