Minipolarbear

Vue 3 + Nuxt 3 기반의 프로젝트에서 매체 리스트를 가져오는 과정에서 useFetch를 사용했다가 다음과 같은 에러를 마주했다. 이 글은 그 문제 상황과 원인, 해결 방법을 기록한 실전 포스트모템이다.문제 상황 매체 검색 조건이 바뀔 때마다 API를 다시 호출해 리스트를 갱신하는 기능을 refetchMediaList()라는 함수로 구현했고, 이 함수 안에서 다음과 같이 apiFetch()를 사용했다.const { data, error } = await apiFetch('/api/media-item/list', { ... }); 그런데 이 함수는 watch() 내부나 lodash.debounce() 안에서 호출되고 있었고, 다음과 같은 에러가 발생했다.에러 메시지[unhandledRejection..

1. 하고 싶었던 것매체 카테고리 트리 구조를 Vue 3 + Vuetify 3로 구현하고 있었는데카테고리 리스트가 트리 구조라서“모두 펼치기” / “모두 닫기” 기능이 필요했다. Vuetify 3에 v-treeview가 있어서v-model:open으로 열고 닫을 노드 ID 배열만 넘겨주면 된다길래“오 이거 쉽게 되겠네” 하고 가볍게 시작했다. 2. 첫 번째 시도 ( v-treeview + open 배열)expandAll() { // 부모 노드만 id this.expandedItems = this.mediaItemCategoryVo.map(item => item.id);} 근데 막상 써보니까부모 노드만 열리고, 자식 노드는 안 열린다. 3. 그러면 하위까지 다 넣으면 되지 않을까?collectAllN..

nestjs로 구현했던 내용을 vue로 컨버전 하는중에서 발생한 이슈 정리 ~ Vue 3 에서 컴포넌트를 구현하면서 겪은 문제와 해결 방법을 정리합니다.TreeView가 “안 보인다”, “데이터는 있는데 글씨가 안 나온다” 등의 문제로 고생하신다면 반드시 확인해보세요. 1. 트리뷰는 뜨는데 텍스트가 안 보임원인: Vuetify는 기본적으로 title 필드를 텍스트로 사용. 내가 쓴 데이터는 label을 사용하고 있었음.해결:item-text="label" 명시적으로 설정또는 데이터를 label → title로 필드명을 변환혹은 데이터 변경:this.mediaItemCategoryVo = data.map((item) => ({ ...item, title: item.label, children: ..

Vue 3 + Vuetify + vue-facing-decorator 환경에서 v-data-table을 활용한 사용자 목록 테이블 구성 방법을 정리합니다.1. headers 선언Vuetify 3에서는 text 대신 title을 사용해야 합니다.headers = [ { title: 'ID', value: 'id', sortable: true }, { title: '사용자명', value: 'fullKoreanName', sortable: true }, { title: '사용자 상태', value: 'userStatusCommonCode.displayValue', sortable: false }, { title: '전화번호', value: 'phone', sortable: true }, { titl..