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)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
170274 [질문] 노트북 구매 관련 질문 드립니다. 갤럭시북2 [11] 도레미송9830 23/04/24 9830
170273 [질문] PGR 유튜브 링크있는 게시물이 느려짐 [7] No Fear7416 23/04/24 7416
170272 [질문] 풀립4 지원금 93정도면 살만한가요? [7] 묵리이장7432 23/04/24 7432
170271 [질문] 갤럭시 S22 울트라 vs S23+ [22] 그말싫10118 23/04/24 10118
170270 [질문] 인터넷 신규가입 관련 질문입니다 (처음이라 호갱 등의 걱정 ㅠ) [8] 비 평 = 이 백 만9074 23/04/24 9074
170269 [질문] 단일 스포츠에서 가장 유명한 종목이 뭘까요? [21] 레너블10145 23/04/24 10145
170268 [질문] 흰 옷에 김치국물 지우는 법 있나요 [18] 대출 30년10177 23/04/24 10177
170267 [질문] 서울 도전먹방 음식점 추천 부탁드려요 [10] Nano11064 23/04/24 11064
170266 [질문] 사운드스틱 2 대체할 데탑 스피커 추천 부탁드립니다. FLUXUX8308 23/04/24 8308
170265 [질문] [PC 견적] 이륙확인 요청드려요 [3] 칠리콩까르네7384 23/04/24 7384
170264 [질문] 힐링데이트코스없을까요? [9] zzzzz9073 23/04/23 9073
170263 [질문] [LOL] 롤드컵 결승이 고척돔이여서 생각난 질문인데요 [8] realcircle11182 23/04/23 11182
170262 [질문] 독서 VS 유튜브 숏츠 [26] EY9189 23/04/23 9189
170261 [질문] 콜옵 모던워페어2 리부트 싱글플레이를 실행하면 DLC 팩이 없다고 실행이 안됩니다 모찌8147 23/04/23 8147
170260 [질문] 이거 도대체 어떻게 된 걸까요? (레이저 프린터 관련입니다.) 카페알파8472 23/04/23 8472
170259 [질문] 이 정보로 고전 한국 게임 찾을 수 있을까요? [3] 샤르미에티미9799 23/04/23 9799
170258 [질문] 어린이날 돌 좀 지난 아기 데리고 갈만한 곳 있을까요? [1] 미숙한 S씨9389 23/04/23 9389
170257 [질문] 이케아 쇼핑법(?) 문의드립니다. [4] Aiurr7500 23/04/23 7500
170256 [질문] 아겜우승후 무관 vs 롤드컵 N회우승 [25] 오타니7402 23/04/23 7402
170255 [질문] 혹시 생존게임과 비슷한 만화나 웹툰이 있을까요? [9] 만찐두빵9487 23/04/23 9487
170254 [질문] 2023년 아파트 공시지가 지금 확인은 불가할까요? 기다리다8985 23/04/23 8985
170253 [질문] 현카 추천할만 한 카드가 있나요? [11] aDayInTheLife9132 23/04/23 9132
170252 [질문] 오늘 복싱 경기, 인터넷에서는 못보나요? [2] 리얼월드10615 23/04/23 10615
목록 이전 다음
댓글

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