v-for 내부에 v-model을 걸었을때 checkbox를 하나만 선택해도 나머지 checkbox가 모두 선택되는 문제

• 문제)

<label v-for="(tmp, i) in state.brandRows" :key="i">
  <input  type="checkbox" name="brand" 
   :value="tmp.brandId" v-model="state.brandIdList"
  > {{ tmp.brandName }} 
</label>

체크박스로 선택한 value를 v-model을 통해 state.brandIdList 배열에 저장하고자 했는데 for문 안에 속한 상태라 체크박스를 하나만 선택해도 나머지 전부다 선택되는 문제가 생김

• 해결)

// template
<label v-for="(tmp, i) in state.brandRows" :key="i">
  <input  type="checkbox" name="brand" 
   :value="tmp.brandId" 
   :checked="isChecked(tmp.brandId)" 
   @click="toggleBrandId(tmp.brandId)"
  > {{ tmp.brandName }} 
</label>

// script
const isChecked = (brandId) => {
  return state.brandIdList.includes(brandId);
}

const toggleBrandId = (brandId) => {
  const index = state.brandIdList.indexOf(brandId);
  const newArray = [...state.brandIdList]; 
  if (index !== -1) {
    newArray.splice(index, 1); 
  } else {
    newArray.push(brandId); 
  }
  state.brandIdList = newArray; 
}

isChecked 함수는 brandId를 매개변수로 받아 해당 brandId가 state.brandIdList 배열에 포함되어 있는지 확인 후 :checked 속성에 전달되어 해당 체크박스가 체크되어야 하는지 여부를 결정한다. 만약 brandId가 state.brandIdList에 있으면 해당 체크박스는 체크된 상태로 렌더링됨

toggleBrandId 함수는 체크박스를 클릭할 때마다 실행되며, 클릭한 체크박스의 brandId를 매개변수로 받아서 brandId가 state.brandIdList에 이미 있으면 해당 brandId를 배열에서 제거하고, brandId가 state.brandIdList에 없으면 해당 brandId를 배열에 추가한다. 이때 state.brandIdList 배열을 직접 수정하지 않고, 새로운 배열을 생성하여 해당 배열을 state.brandIdList에 할당함으로써 변경 사항을 감지하도록 한다.

• 의문1 ) :checked는 무엇?

:checked는 HTML에서 제공하는 속성. 이 속성은 체크박스나 라디오 버튼 등이 체크되어 있는지 여부를 나타내는 불린(boolean) 값으로, 해당 엘리먼트가 체크되어 있으면 true, 그렇지 않으면 false를 반환한다.

Vue에서 :checked 속성은 해당 체크박스가 체크되어 있는지 여부를 표시하기 위해 사용됨. v-model과 함께 사용하면 사용자의 상호작용에 따라 데이터를 업데이트할 수 있음.

• 의문2 )

const index = state.brandIdList.indexOf(brandId);
if (index !== -1) {
  newArray.splice(index, 1); 
}

indexOf()는 배열에서 특정 요소를 찾아서 그 인덱스를 반환하는 메서드. 만약 배열에 해당 요소가 없으면 -1을 반환한다.

if (index !== -1)은 indexOf() 메서드의 반환값이 -1이 아닌 경우. 즉, 해당 요소가 이미 배열에 있다면 splice() 메서드를 사용하여 그 요소를 배열에서 제거한다. 여기서는 splice(index, 1)을 사용하여 newArray에서 index에 해당하는 요소를 하나만 제거하도록 함. 이렇게 함으로써, 사용자가 이미 선택한 브랜드를 체크박스에서 체크해제할 수 있게 됨.