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)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
167976 [질문] 엑셀 고수님들 질문 있습니다 ㅠㅠ [9] 오렌지 태양 아래7508 22/12/22 7508
167975 [질문] 1월말일에 퇴사한다고 하고 연차 15일 모두 사용 가능한가요? [25] VictoryFood11070 22/12/22 11070
167974 [질문] 아주 저렴한 가성비 pc 추천 부탁 드려요. [9] 신촌로빈훗11666 22/12/22 11666
167973 [질문] 열혈강호 보고 싶습니다. 어디서 보나요? [10] 리얼월드9964 22/12/22 9964
167972 [질문] 예능에서 여자 탱커하면 누가 있을까요? [37] 샤르미에티미9073 22/12/21 9073
167971 [질문] 서울 24시간 국밥 맛집 [12] Avicii10731 22/12/21 10731
167970 [삭제예정] 마른비만 탈출 조언 부탁드립니다. [2] Rays7554 22/12/21 7554
167969 [질문] 컴퓨터 완본체 견적 질문드립니다 [10] funk8618 22/12/21 8618
167968 [질문] 어린이집 크리스마스 행사 옷 괜찮을까요..? [4] 제라스7943 22/12/21 7943
167967 [질문] 22년 자동차 보험인상이 있었나요? [6] Le_Ciel6257 22/12/21 6257
167966 [질문] 스마트폰 원격제어 승인없이 하는게 있을까요? [2] 바람의바람6829 22/12/21 6829
167965 [질문] 이미지 캡쳐 화질열화 관련 질문입니다 [2] 로각좁5744 22/12/21 5744
167964 [질문] 이직 문제 고민 [3] DoubleB7168 22/12/21 7168
167963 [질문] 부모님 핸드폰 바꿔드리려는데 이거 믿어도 될까요? [11] 무한도전의삶7388 22/12/21 7388
167962 [질문] [vue js] button에 클릭이벤트로 일반좌클릭과 컨트롤+좌클릭 같이 넣는법 알려주세요~ [6] Mindow8543 22/12/21 8543
167961 [질문] 갤럭시 s23 이 출시되면 s22의 가격이 많이 다운될까요? [6] 노래하는몽상가7936 22/12/21 7936
167960 [질문] 백업안한 카톡 대화 복원할 방법이 없을까요? [4] 더치커피5718 22/12/21 5718
167959 [삭제예정] itzy라는 그룹 뭔 사연이 있나요? [11] 삭제됨8710 22/12/21 8710
167958 [질문] 영어회화 책 추천 부탁드립니다. (초보) [2] BISANG7424 22/12/21 7424
167957 [질문] 2월 제주도 트래킹 코스 추천 부탁드립니다. 이신아8707 22/12/21 8707
167956 [질문] 카카오택시 블루를 이용하다가요 [2] nekorean6594 22/12/21 6594
167955 [질문] 휴대폰발열을 시킬려면 [4] 만우9827 22/12/21 9827
167954 [질문] 페르소나5로얄 진행중인데 도움이 필요합니다!! [11] Restar8381 22/12/21 8381
목록 이전 다음
댓글

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