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)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
168001 [질문] 주말에 서울 구경할만한데 추천 부탁드립니다 [8] 고오스8672 22/12/23 8672
168000 [질문] 전세가 사라진다면 [8] 훈타8413 22/12/23 8413
167999 [질문] LOL 용 바론 투표 '받기' 가 이해가 안 갑니다 [17] 버드맨10280 22/12/23 10280
167998 [질문] 아들 브롤스타즈 현질 해주는것에 대해 질문있습니다. [25] 외쳐2212307 22/12/23 12307
167997 [질문] 맥북에서 캐드 사용할 경우 팁이 있을까요? 피를마시는새7144 22/12/23 7144
167996 [질문] 부조금 카카오 송금 좀 그럴까요? [18] CastorPollux8181 22/12/23 8181
167995 [질문] 다이어트 관련 질문입니다. [15] 밀로세비치9485 22/12/23 9485
167994 [질문] 부동산 폭등장에 1주택은 좋을 것도 없다는 말이 있었잖아요? [26] 대출 30년9876 22/12/23 9876
167993 [질문] 롯데백화점 잠실점, 2조 클럽 달성. 여긴 무슨 클럽이에요? [9] 떡국떡10899 22/12/23 10899
167992 [질문] 창호교체 금액 얼마정도 예상하면 될까요? [3] 탄야7802 22/12/23 7802
167991 [질문] 필드레코더?를 마이크로 활용이 가능할까요? [1] Aiurr10159 22/12/23 10159
167990 [질문] 중국어(북경어) 라고 하면 어떤 중국어를 말하는건가요? [8] 주니뭐해6977 22/12/23 6977
167989 [질문] 전세금 변경되어 계약서 다시 쓰려는데 확정일자 다시 받아야 할까요? [2] 휘안7544 22/12/23 7544
167988 [질문] IRP 상품가입 어느 은행, 어느 상품으로 가입해야 하나요? [13] 쇄빙11464 22/12/23 11464
167987 [질문] 닌텐도스위치 게임 초1 선물 추천부탁드립니다! [23] 라니안14888 22/12/22 14888
167986 [질문] 운전초보가 브레이크 조작 관련 질문폭탄 드립니다. [13] 아이폰12PRO10879 22/12/22 10879
167985 [질문] 민요 질문입니다. 경기서도민요 vs 남도민요 레슨 고민입니다. [2] 기술적트레이더9530 22/12/22 9530
167984 [질문] BL을 좋아하는 여성들의 심리를 알고싶습니다. [42] 한이연14769 22/12/22 14769
167983 [질문] 대출금을 갚을지 말지 고민이 됩니다. [22] 짱짱걸제시카9974 22/12/22 9974
167982 [질문] PS4 위쳐3 무료 업그레이드 질문입니다 [2] 회전목마10008 22/12/22 10008
167981 [질문] 휴대폰 바꾸려는데요 [16] wish buRn11211 22/12/22 11211
167980 [질문] 셀털글 삭제합니다. [86] 삭제됨11689 22/12/22 11689
167979 [질문] 웰치스 제로 너무 사기 아닌가요? [44] This-Plus12660 22/12/22 12660
목록 이전 다음
댓글

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