본문 바로가기

📚 FrontEnd -Study/Vue3

리스트에서 검색한 항목 다시 돌아와도 그대로 유지하기 처음에는 이 부분을 놓치고 단순히 목록 버튼이나 수정 버튼을 누르면 router.back()으로 동작하게 하였다.그러다보니 이전에 리스트에서 만약 100페이지를 보고 있으면 해당 글 누르고 다시 돌아오면 다시 1페이지로 돌아오는것이다. 이게 데이터가 점점 많아지니 너무 불편하다는 것을 깨달았다. 그래서 리스트에서 아카이브 디테일 페이지에 들어갈 수 있는 모든 경로에 route와 router를 사용하여필요한 데이터를 넘겨주고 받아서 그전에 봤던 페이지수와 검색어 등을 유지하여 이전에 봤던 리스트와 똑같게 불러올 수 있게끔 수정하였다. 여러 페이지를 많이 수정하였는데 그 중 하나의 페이지만 예를 들어 보겠다.우선 공개관리 페이지에서 꼭 넘겨줘야할 값들은 아래와 같다.prevPage(페이지경로)pageNum(.. 2024. 10. 29.

부모, 자식 컴포넌트 v-model 연동 부모 컴포넌트(form태그)와 자식 컴포넌트(input태그) 사이에 v-model 연동을 하고 싶었다.. 어떻게 해야할까? v-model의 개념 - v-model은 template에서 각 엘리먼트가 사용하는 data 값이다. - v-model은 부모 - 자식 관계가 없는 컴포넌트에서는 자유롭게 사용이 가능하다. 그러나 부모-자식 간 관계가 있는 컴포넌트에서 자식 컴포넌트가 부모 컴포넌트의 값을 가져와 v-model로 사용하면 아래와 같은 에러가 난다고 한다. vue.runtime.esm.js:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers. 그렇기 때문에 자식 컴포넌트가 부모의 값을 핸들링하면 v-model이 아닌 :.. 2024. 4. 3.

Vue에서 드롭다운 메뉴 바깥 클릭시 메뉴 닫기 외부 영역 인식하기 1. refs 속성으로 dom 요소 접근하기 우선 외부 영역 클릭을 인식하기 위해서 요소에 직접 접근할 수 있도록 해주는 refs 속성을 사용해야 한다. ref="참조명" 위와 같이 접근 가능 2. eventListener로 클릭 이벤트 처리하기 앞에서 참조할 요소 지정했으면, dom요소가 클릭되었는지를 감지하기 위해 eventListener를 사용해야 한다. window.addEventListener('click', this.onClick); dom에 클릭이벤트 발생했으면 onClick 함수 실행한다. onClick(e){ if(e.target.parentNode !== this.$refs.card){ // 결과창 닫기 } } {{ dropDown }} {{ item }} dropd.. 2024. 3. 30.

이전 1 다음

728x90

티스토리툴바