다중셀렉트

https://apollo.primevue.org/uikit/input

 

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" class="checkbox-item">
      <input
        type="checkbox"
        :id="item.id"
        :checked="item.checked"
        @change="handleChange(item.id, $event.target.checked)"
      />
      <label :for="item.id">{{ item.label }}</label>
    </div>
    <div class="selected-list">
      <div v-for="(item, index) in selectedItems" :key="item.id" class="selected-item">
        <input
          type="checkbox"
          :id="'selected-' + item.id"
          :checked="item.checked"
          @change="handleSelectedChange(item.id, $event.target.checked)"
        />
        <label :for="'selected-' + item.id">{{ item.label }}</label>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const items = ref([
  { id: 1, label: 'Item 1', checked: false },
  { id: 2, label: 'Item 2', checked: false },
  { id: 3, label: 'Item 3', checked: false },
]);
 
const selectedItems = ref([]);
 
const handleChange = (id, checked) => {
  // `items` 배열에서 선택된 항목의 인덱스를 찾습니다.
  const itemIndex = items.value.findIndex(item => item.id === id);
  
  // `itemIndex`가 -1이 아니면, 즉, 항목이 배열에 존재하면
  if (itemIndex !== -1) {
    items.value[itemIndex].checked = checked; // 해당 항목의 체크 상태를 업데이트합니다.
    
    if (checked) {
      // 체크된 경우, `selectedItems` 배열에 해당 항목을 추가합니다.
      selectedItems.value.push(items.value[itemIndex]);
    } else {
      // 체크 해제된 경우, `selectedItems` 배열에서 해당 항목을 삭제합니다.
      const selectedIndex = selectedItems.value.findIndex(item => item.id === id);
      if (selectedIndex !== -1) {
        selectedItems.value.splice(selectedIndex, 1);
      }
    }
  }
};
 
const handleSelectedChange = (id, checked) => {
  // `selectedItems` 배열에서 선택된 항목의 인덱스를 찾습니다.
  const itemIndex = selectedItems.value.findIndex(item => item.id === id);
  
  // `itemIndex`가 -1이 아니면, 즉, 항목이 배열에 존재하면
  if (itemIndex !== -1) {
    selectedItems.value[itemIndex].checked = checked; // 해당 항목의 체크 상태를 업데이트합니다.
    
    if (!checked) {
      // 체크 해제된 경우, `selectedItems` 배열에서 해당 항목을 삭제합니다.
      selectedItems.value.splice(itemIndex, 1);
      
      // 원래 `items` 배열에서 해당 항목의 체크 상태를 해제합니다.
      const originalIndex = items.value.findIndex(item => item.id === id);
      if (originalIndex !== -1) {
        items.value[originalIndex].checked = false;
      }
    }
  }
};
</script>
 
<style scoped>
.checkbox-item {
  margin-bottom: 5px;
}

.selected-list {
  margin-top: 10px;
}

.selected-item {
  margin-bottom: 5px;
}
</style>