From ae5e8f04716f6c16b1e46c9804e508a5005b2704 Mon Sep 17 00:00:00 2001 From: jihyun jo Date: Mon, 5 Feb 2024 14:38:03 +0900 Subject: [PATCH 01/40] checkbox --- src/views/Summery.vue | 50 +++++++++++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/src/views/Summery.vue b/src/views/Summery.vue index 972440f..55d8b2d 100644 --- a/src/views/Summery.vue +++ b/src/views/Summery.vue @@ -10,7 +10,8 @@ export default { pipelineFilter:[], // watch 로 변경 감시할 예정 // 추후 기본값은 all 으로 설정예정 - pipelineSelected: null + // null 값을 넣을시 incluedes 에러가 난다 + pipelineSelected: [] } }, methods:{ @@ -34,10 +35,23 @@ export default { }, // click 이벤트로 받은 선택된 값을 pipelinekey 로 바로 변경적용시킴 - setPipelineSelected(pipelineKey){ - // pipelineSelected 에 watch 걸기 - this.pipelineSelected = pipelineKey; + setPipelineSelected(pipelineKey) { + // 이미 선택된 값인지 확인 + const isAlreadySelected = this.pipelineSelected.includes(pipelineKey); + // 이미 선택된 값이면 아무것도 하지 않음 + if (isAlreadySelected) return; + + // 새로운 값 추가 + this.pipelineSelected.push(pipelineKey); + } + }, + + watch: { + pipelineSelected() { + + // pipelineSelected 값이 변할 때 수행할 작업 + console.log("Selected pipelines:", this.pipelineSelected); } }, // 이제 전달받은 선택된 setPipelineSelected key 값을 아래 talbe 에 (파라미터)로 전달해서 필터링시키고 @@ -50,10 +64,12 @@ export default { const response = (table(pipelineSelectedKey)).data.data response.forEach(item => this.tableList.push(item)); + // 선택된 값이 초기화가 아니라 기존 데이터에 추가되도록 해야한다. console.log("Selected pipeline names:", this.pipelineSelected); } }, + // create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다. async created(){ await this.getPipeline(); @@ -65,16 +81,22 @@ export default {