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)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
170845 [질문] 외환거래 신고는 어떻게 하나요? [2] 씨드레곤10788 23/05/28 10788
170844 [질문] 제가 어렸을때 가지고 놀았던 장난감이 요즘도 있을까요? [5] 이시스10389 23/05/28 10389
170843 [질문] 소스류 냉동보관 해야하나요? [4] 대출 30년8431 23/05/28 8431
170842 [질문] 열보존 거의 안되는 시원한 천?이 있을까요 [6] 진하늘10037 23/05/28 10037
170841 [질문] 음식 보관방법 질문입니다. [7] 레너블8700 23/05/27 8700
170840 [질문] 종목별 우리나라 역대 최고의 스포츠선수는 누구일까요? [19] 매운새우깡11596 23/05/27 11596
170839 [질문] 인스타 영상 배경음 좀 알려주세요 [3] 밥과글8571 23/05/27 8571
170838 [질문] 핸드폰 구매 질문드립니다 [8] 니이모를찾아서8817 23/05/27 8817
170837 [질문] 파울라너 헤페바이스비어 와 바이스비어 무슨 차이가 있나요? [6] 코기토10090 23/05/27 10090
170836 [질문] 남산처럼 내려올 때 버스 타고 내려올 수 있는 산이 또 있을까요 [2] qwerasdfzxcv9198 23/05/27 9198
170835 [질문] 초음파 벌레퇴치기에 대한 질문입니다. [5] 진산월(陳山月)8098 23/05/27 8098
170834 [질문] 컴퓨터 모니터와 함께 사용하기 좋은 조명이 있을까요? [6] 보로미어9142 23/05/27 9142
170833 [질문] 카시오 사각메탈시계와 비슷한 모양의 시계 좀 알려주세요~ [3] 바람의여행기8916 23/05/27 8916
170832 [질문] 컴맹이 디아 4하고싶습니다. 뭘 업글해야 합니까? [21] 환상10063 23/05/26 10063
170831 [질문] 자동차보험이 넘 비싼데 딴거루 바꿔도 되나요?? [11] 기사조련가8072 23/05/26 8072
170830 [질문] 퇴직연금 연봉인상분 소급적용에 대한 질문 [3] SpicyPeach7511 23/05/26 7511
170829 [질문] 에어컨 지금 설치비용이 어떻게 되나요? [4] 그때가언제라도8655 23/05/26 8655
170828 [질문] 내일 롯데월드에 가볼 생각입니다. 피를마시는새7073 23/05/26 7073
170827 [질문] 성수동 맛집 카페 추천 좀 부탁드립니다 [9] ashed7646 23/05/26 7646
170826 [질문] 접지문제로 이어폰에 계속 전기가 오르는데 [3] 시린비8611 23/05/26 8611
170825 [질문] 할만한 온라인게임 있을까요? [14] 불독맨션9605 23/05/26 9605
170824 [질문] 윈도우 방화벽 포트 오픈해도 연결이 안돼요 [1] 탄야7874 23/05/26 7874
170823 [삭제예정] 조현병이 확실한 지인에 대한 질문 [7] 삭제됨9244 23/05/26 9244
목록 이전 다음
댓글

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