[Vue] v-on:click이벤트를 통한 링크 호출 ( feat. window.open)

Vue를 이용하여 버튼을 클릭하였을 때 해당 게시글의 인자값을 가지고 새로운 페이지를 열고싶을 때

window.open를 이용하면 된다. 제이쿼리나 자바스크립트를 이용할때도 사용하는 녀석이다.

 

우선 아래와 같은 게시판이 있다고 가정을 해보자

 

샘플 코드

위의 소스는 테이블에 저장되어 있는 상품의 정보를 게시판에 출력해주고, productNm(이하 상품명)을 클릭하면

moveProduct라는 메서드를 호출한다. moveProduct 메서드는 productSn(이하 상품번호)를 인자로 받는다.

 

메서드는 다음과 같다.

 

moveProduct

moveProduct 메서드에서 상품번호를 인자로 받고, window.open을 통해 해당 상품에 대한 링크를 새로운 탭으로 호출한다.