[Nuxt.js] 여러개의 체크박스에서 하나만 체크되게 하는 법

라디오박스라면 하나만 체크되니 css 를 수정해서 체크박스처럼 보일 수도 있겠지만

체크박스로 이미 퍼블이 된 상태에서 수정할 필요가 있어 직접 코드를 짜보았다.

 

템플릿내 코드 

 <input type="checkbox" v-model="pay_method.card" name="chkbox" id="card"
 @change="check_one( {type:'card' })" >
                            
<input type="checkbox" v-model="pay_method.bank" name="chkbox"  @change="check_one( {type:'bank' })"
 id="noBankBook">

 

data 정의

data(){
        return{            
            pay_method: { card: true, bank: false },
        }
    },

method 정의

methods: {
	check_one(element) {
      console.log('checkbox check : ', element.type)
      let obj = this.pay_method

      if (element.type) {
        for(const [key, value] of Object.entries(obj)) {          
          console.log(`${key}: ${value}`);

          if (key == element.type) {
            obj[key] = true
          } else {
            obj[key] = false
          }
        }

        const check = document.getElementById(`${element.type}`);
        
        if (check && check.checked != undefined) {
          check.checked = true;
        }
        console.log('checked', check.checked)
      } 

      console.log('type', JSON.stringify(this.search_type))

    },
}