Vue를 이용하여 버튼을 클릭하였을 때 해당 게시글의 인자값을 가지고 새로운 페이지를 열고싶을 때 window.open를 이용하면 된다. 제이쿼리나 자바스크립트를 이용할때도 사용하는 녀석이다. 우선 아래와 같은 게시판이 있다고 가정을 해보자 위의 소스는 테이블에 저장되어 있는 상품의 정보를 게시판에 출력해주고, productNm(이하 상품명)을 클릭하면 moveProduct라는 메서드를 호출한다. moveProduct 메서드는 productSn(이하 상품번호)를 인자로 받는다. 메서드는 다음과 같다. moveProduct 메서드에서 상품번호를 인자로 받고, window.open을 통해 해당 상품에 대한 링크를 새로운 탭으로 호출한다.

Vue를 이용하여 게시판을 만들고 있는데 다음과 같은 문제에 부딪혔다. v-for문내에서 셀렉트박스를 이용하여 value값을 추출하여 js로 보내야 하는데.. 지금 만들고 있는 게시판은 v-for문(1)안에 있는 셀렉트박스의 value값도 v-for문(2)을 이용하여 돌려주었고 등록 버튼은 v-for문(2)의 바깥에 있는 구조였다. 지금까지는 셀렉트박스를 그냥 검색창에서만 사용했기 때문에 v-for문을 돌린 적이 없었다. 그렇기 때문에 그냥 v-model을 태그에 넣어주고 Vue의 data에 선언만 해주면 간단히 셀렉트박스의 value값을 가져 올 수 있었다. 이렇게 v-for문이 아니라 그냥 하나의 셀렉트박스를 사용하면 v-model에 v-모델명(srhKeywordType)를 선언해주고 data 함수 ..

Vue를 이용해서 게시판을 만드는데 Vue인스턴스에 각 컴포넌트들을 상속해 컴포넌트에 있는 게시판 데이터를 가져오는 search()라는 함수를 호출하려고 했다. 그래서 Vue인스턴스가 mounted가 되자마자 컴포넌트의 search()함수를 호출하려는데 mounted 내에서 컴포넌트를 찾지 못하는 상황이 발생.. 위와 같이 컴포넌트에 있는 함수를 호출하였지만 해당 함수를 찾지 못한다.. 그런데 개발자도구를 이용해 확인해보니 함수뿐 아니라 아예 컴포넌트 자체를 찾기 못하는 상황.. 원래 Vue의 라이프 사이클링을 보면 mounted같은 경우 컴포넌트가 먼저 실행되고 그 후에 인스턴스가 실행이 되니 인스턴스의 mounted()내에서는 컴포넌트가 들어있어야 되는데 들어있지 않다.. 한시간 동안 계속 찾다가 결..

Vue를 이용해서 게시판을 작성하는데 에러가 떴따.. 템플릿을 적용하는데 실패했다는 에러내용인 듯한데.. 해당 에러 밑으로 템플릿 소스가 다 뜬다 그 소스들을 무시하고 맨 밑으로 내려가보니 위와 같은 에러메세지가 뜬다. key 관련 문제 때문에 템플릿을 적용할 수 없다는 내용같은데.. 예전에 랜더링 문제 때문에 key를 설정한 적이 있는데 그 문제인가 싶어 그 키를 지우니 제대로 돌아간다. 위에 v-for을 이용해 리스트를 출력하는 에 :key="board"를 설정해 놓았다. 원래 저 key를 이용하여 리스트가 변할때마다 리랜더링이 되도록 하여 했지만 실패했고 그걸 그대로 방치하여 에러가 떴던 것.. 확인 또 확인하자..

Vue를 이용하여 게시판을 만들고 있는데 랜더링이 되지않는다.. 현 상황은 게시판은 뿌려져 있고, 3페이지로 이동을 하면 쿼리를 통해 데이터(리스트/페이징)를 성공적으로 가져 왔고 해당 데이터를 컴포넌트의 data에 넣은 상황.. 그런데 이상하게 화면은 바뀌질 않았다.. Vue는 반응형 웹이기 때문에 data안에 있는 데이터 값이 변경 되면 분명 웹화면도 변경이 되야 하는데.. 위의 소스는 search(검색조건) 데이터를 Controller로 보내주는 역할을 하며 통신이 성공적으로 완료 되면 return되는 값을 result에 담아준다. 해당 result에 리스트, 페이징 데이터가 담겨있다. 분명 데이터값을 변경이 되었다.. 저 데이터 값을 컴포넌트의 data에도 넣어줬다.. 근데 왜 안될까.. 결국 이..

Vue를 이용하여 게시판 만드는 연습을 하는데 도중에 이러한 에러가 발생하였다. 해당 내용을 보면 component를 올바르게 등록하였는가? 라는 내용인데... 분명히 component를 등록하였다. 분명 위와 같이 해당 component를 등록하였는데 component가 등록되어 있지 않다고 하자 당황..... 이것 때문에 하루종일 헤매었다... 그러다 구글링을 하면서 Vue인스턴스가 component 보다 아래에 있어야 된다는 말을 듣고 설마... 하면서 위치를 바꿔보니 된다.... 뷰 인스턴스와 컴포넌트를 각각 javaScript파일로 만들어서 불러와서 이용을 하는 바람에 그걸 생각 못한 게 실수였다.. 뷰 인스턴스를 컴포넌트보다 먼저 불러와서 컴포넌트를 못찾음.. 뷰 인스턴스를 컴포넌트보다 아래 ..