vue.js 데이터 바인딩 문제 ...

Question

onMounted(async ()=> { try { const response = await axios.get(`/api/${category}`); const postResponseDto = response.data; postsStore.clean(); postsStore.addPost(postResponseDto.postListItems); postsStore.setMaxPage(postResponseDto.maxPage); } catch (error) { console.error(error); } });부모컴포넌트에서 pinia 저장소에 데이터 저장!!!const postListItems=ref([{ id:0, title:'', nickName:'', commentNum:0, viewCnt:0, likeCnt:0, createdAt:'', }]); const maxPage=ref(postsStore.getMaxPage); postListItems.value=postsStore.getPosts; console.log(maxPage.value); console.log(postListItems.value);자식 컴포넌트에서 저장소에있는 데이터 불러와서 삽입!!이렇게하면이렇게 console.log에는 데이터가 찍혀있는데

화면은 다음과같이 테이블이 비어있습니다 이유가 뭘까요 ? ㅠㅠ

Kunie · Accepted Answer

postListItems.value=postsStore.getPosts문제의 코드라인입니다.부모 컴포넌트의 onMounted() 에서 postsStore.addPost()를 통해 postStore 의 state 를 변경하여 postStore 의 getter 로 정의한 postStore.getPosts의 새로운 계산된 값으로 변경 완료된 시점보다 자식 컴포넌트에서 이 라인을 수행하는 시점이 나중이라는 것이 보장된다면 문제가 없었을지도 모릅니다.하지만 그렇지 않으며, 또한 그럴 가능성도 매우 낮습니다.이 모든 과정이 비동기로 이루어지기 때문이며, 일반적으로 이미 부모 컴포넌트에서 자식 컴포넌트를 조건없이 랜더링 하도록 명시하였다면 더욱 가능성은 낮아질 것입니다.원하는 결과를 도출하기 위해서는 몇 가지 방법이 있지만, 이 중 몇 가지는 최선이 아닙니다. 안 좋을 수 있는 방법과 적절한 방법 두 가지 예시를 드리겠습니다.1) 자식 컴포넌트 랜더링 조건을 부여하는 것으로 참조하는 state 의 시점을 맞추는 방법ParentComponent.vue ChildComponent.vue 2) 랜더링하는 컴포넌트가 참조하는 state 의 의존성을 명시하는 방법ParentComponent.vue ChildComponent.vue 첫 번째 방법은 isLoading state 를 정의하고, 데이터를 로드하는 시점을 관리하여 자식 컴포넌트를 랜더링할 시점을 맞추는 방법입니다. 하지만 일반적으로 좋지 않은 패턴입니다.두 번째 방법은 computed() 를 사용하여 postListItems 가 postsStore.getPosts 에 의존하여 변경이 감지되면 값을 업데이트하도록 합니다.

vue.js 데이터 바인딩 문제 ...

1개의 답변

#databinding 목록