PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2022/12/21 16:11:32
Name Mindow
Subject [질문] [vue js] button에 클릭이벤트로 일반좌클릭과 컨트롤+좌클릭 같이 넣는법 알려주세요~ (수정됨)
프론트 개발 완전 쌩초보입니다 ㅠㅠ
제가 개발 직접한 거 아니고 수정해야 하는 상황입니다
프론트 개발환경은 vue 3 입니다

목록페이지가 있고 거기에 게시글 목록을 뿌려주는 테이블 컴포넌트가 있습니다
지금 현재는 클릭시 함수를 통해 window.open으로 상세보기 페이지가 새 창으로 뜹니다
수정 요구 사항은 일반 클릭시 창 그대로 이동되게 하고 컨트롤+클릭시 새창 이동입니다

클릭되는 요소(엘리먼트)는 a가 아니라 button입니다.
a로 바꾸기 위해 router-link로 바꾸는 방법이 있지만
클릭 이벤트에 담긴 함수에 페이지 이동 태우는 것 메소드뿐만 아니라 또다른 메소드 한두개 더 있더군요
그것도 같이 하나의 함수에 같이 실행을 시켜야 해서 엘리먼트 button은 a로 안 바꾸고 그대로 살리고
원래 잡아놨던 함수를 그대로 수정 봐야한다고 합니다

간략하게 예시로 설명 드리면

어떤 목록페이지가 있고 거기에 테이블 컬럼 헤드가 게시글 제목, 작성일 정도 있다고 가정했을 때

먼저 테이블 컴포넌트.vue 을 열어보면
tr이나 td for문 돌리는거 다 생략하고 td안에 뿌려지는 부분만 보자면

[!-- 버튼 기능 link: true --]
            [template v-else-if="data.link"]
              [template v-if="item[data.value] != null"]
                [button type="button" @click="viewDetails(item, data.value)" class="text-link"]
                  [span] {{ item[data.value] }} [/span]
                [/button]
              [/template]
            [/template]
이런식으로 button 에 viewDetails 클릭이벤트가 걸려 있습니다~

[*] 피지알편집기에서 꺽쇠를 넣으면 그 부분이 삭제가 되어서 꺽쇠 대신에 [ ] 대괄호로 바꿔넣었으니
양해 부탁드립니다 크크


현재 목록페이지 컴포넌트.vue 하단 스크립트 부분

setup() { 여기 }

여기에 컬럼을 정의하고 있습니다

const head = [
  { text: '게시글 제목', value: 'dataTitle', link: true },
  { text: '작성일', value: 'dataDate', date: true }
]
;

이런 식으로요~

그리고 클릭이벤트 함수가 있습니다

const viewDetails = value => {
  // router.push(`/cplb/cplbPurCondRgst?purPrdtNo=${value.purPrdtNo}`, value.purPrdtNo);
  window.open(`/cplb/cplbPurCondRgst?purPrdtNo=${value.purPrdtNo}`, value.purPrdtNo);
  store.commit('cplb/setSearchOption', options);        
};

개발 잘 아시는 분들은 딱 봐도 아시겠지만
//router.push 블라블라는 그냥 새창 이동 없이 페이지 이동하는 것인데 주석처리 되어있는거고
window.open 블라블라는 새창 이동이 되는거고요
store.commit 이 클릭시 페이지 이동과 함께 같이 실행되야 하는 메소드입니당



* 엘리멘트를 a가 아닌 button 인 상태에서 router.push를 걸었을 때 페이지 이동은 잘 되지만
컨트롤+클릭 시 새창 이동이 아닌 그냥 이동이 됩니다

* button을 벗기고 router-link로 교체하는 방법이 아닌 button 그대로 활용하는 방법. router-link를 안 쓰는 이유는
이미 개발이 많이 진행되어 있는 상태라 영향도 때문에 테이블 컴포넌트는 최소한의 수정만을..
그리고 store.commit 과 같은 클릭이벤트 함수 안에 페이지 이동이 아닌 다른 메소드도 같이 실행하기 위해서요~



개발 능력자분들의 답변 부탁드립니다 ㅠㅠ

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
22/12/21 16:55
수정 아이콘
질문이 좀 정신 없는데 그냥 클릭일땐 router.push, 컨트롤클릭일떈 window.open을 하시려는건가요
1. [button type="button" @click="viewDetails(item, data.value, $event)" class="text-link"]
로 바꿔서 viewDetails호출하실때 $event를 포함시킵니다.
2. viewDetails 에서 전달된 event를 까보면 그안에 ctrlKey로 컨트롤클릭인지 구분할수있습니다.
if(event.ctrlKey) {
window.open(쏼라 쏼라)
} else {
router.push(쏼라 쏼라 )
}

하시면 뎁니다.
22/12/22 09:48
수정 아이콘
if문은 클릭 함수 안에 넣는건가요?

const viewDetails = (value, event) => {
if (event.ctrlKey) {
window.open(블라블라);
} else {
router.push(블라블라);
}
};

이렇게 넣어봤는데 안 먹혀서요...ㅠㅠ
22/12/22 15:22
수정 아이콘
(수정됨) viewDetails 함수의 2번째 인자가 event가 맞는 건가요?
면역님 답변대로 하셨으면 3번째가 맞는 거 같아서요
22/12/21 17:24
수정 아이콘
(수정됨) 'exact'와 'control' modifier를 활용하면 편할것 같습니다.
https://vuejs.org/guide/essentials/event-handling.html#key-modifiers

vue2밖에 안해봤지만 문서를 보니 vue3에서도 큰 변함이 없는거 같습니다.

첨언하자면 안된다고 하셨지만 그럼에도 불구하고 최대한 Router-link를 쓰는 방향이 좋습니다. ctrl 클릭 말고도 휠버튼이나 context menu 같은곳에서 새창 이동은 Button을 쓰면 아무것도 지원이 안됩니다.
22/12/22 10:53
수정 아이콘
button 에 @클릭에도 함수 주고 @컨트롤+좌클릭 에도 함수 준다는 말씀이신가요?ㅠㅠ
button 에 @click.exact="viewDetails(item, data.value)" 와 @click.ctrl.left="viewDetailsBlank(item, data.value)" 를 같이 넣어봤는데
안 되더라구요....
@click.ctrl.left가 잘못 작성된건가요
22/12/22 18:04
수정 아이콘
click.ctrl.exact로 하면 안되나요? (맥북은 click.meta.exact)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
170177 [질문] 베트남 4박5일 세식구 캐리어가 얼마나 필요할까요? [9] 쉬군8555 23/04/18 8555
170176 [질문] 회의실 무선마우스 질문 [3] 분당선8096 23/04/18 8096
170175 [질문] 자동차 보험 질문 [14] 판을흔들어라8608 23/04/18 8608
170174 [질문] ISA계좌 절세 개이득방법..? [4] 더높은곳으로11493 23/04/18 11493
170173 [질문] 식기세척기 건조후 물얼룩.. [16] 인스네어리버7380 23/04/18 7380
170172 [질문] 유로 vpn 중에 추천좀 해주세요 [12] 괴도키드8327 23/04/18 8327
170171 [질문] 뒷머리 두통이 지속되면 어느 병원에 가야 하나요? [17] VictoryFood9688 23/04/17 9688
170169 [질문] 재건축시, 임대주택이 포함되면, 매각 단가는 보통 어떻게 산정되나요? [1] LG의심장박용택7011 23/04/17 7011
170168 [질문] 부산 파스타 집 추천 부탁드립니다! [12] 마신_이천상8992 23/04/17 8992
170167 [질문] 이 사양으로 디아4를 돌릴 수 있을까요? (+업그레이드 질문) [4] 네집마련8226 23/04/17 8226
170166 [질문] 인슐린 보관용 미니냉장고 있을까요? [7] beloved7875 23/04/17 7875
170165 [질문] 친구가 공금을 막 쓸때 어떻게하면 좋을까요 [31] 외쳐229832 23/04/17 9832
170163 [질문] 차량 led전조등문의입니다 [1] 치맥사랑7590 23/04/17 7590
170162 [질문] 아이폰 초기 불량 당첨되고 수리 거절당하는 경우 어떻게 해결하나요? [6] 진짜로대머리아님7042 23/04/17 7042
170161 [질문] 모기 물리신 분 있나요? [6] 무한도전의삶8735 23/04/17 8735
170160 [질문] 컴퓨터 프리징 [15] 적막10090 23/04/17 10090
170159 [질문] 동사무소에서 불쾌한 일을 겪었는데 제가 예민한건까요? [33] 기다리다8970 23/04/17 8970
170158 [질문] (자동차초보. 테슬라 모델3)수리 방법을 몰라 이웃님께 도움 부탁드립니다 [4] 세바준8119 23/04/17 8119
170157 [질문] PC 견적 질문입니다. [4] soritiger10501 23/04/17 10501
170156 [질문] 공포/경외/무력감이 강렬한 영화 있을까요 [32] 그말싫9111 23/04/17 9111
170155 [질문] 무선충전기 위에 올려두면 뜨거운데 괜찮나요?? [7] CEO9670 23/04/17 9670
170154 [질문] LA에서 1년 간 거주 관련 질문입니다. [4] 입다물어말포이7486 23/04/17 7486
170153 [질문] 하이마트 컴퓨터 질문 [6] up10336 23/04/17 10336
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로