
views/DetailView.vue 코드 확인
- 게시글 상세 정보를 표현할 컴포넌트
- AJAX 요청으로 응답 받아올 article의 상세 정보들을 표현
router/index.js
- id를 동적 인자로 입력 받아 특정 게시글에 대한 요청
components/ArticleListItem.vue
- router-lick를 통해 특정 게시글의 id 값을 동적 인자로 전달
- 게시글 상세 정보를 Server에 요청
views/DetailView.vue 코드 확인
- this.$route.params를 활용해 컴포넌트가 create될 때, 넘겨받은 id로 상세 정보 AJAX 요청
- 게시글 상세 정보 요청 결과 확인
- 넘겨 받은 데이터 구조 확인 후, 적절하게 화면 구성

- 응답 받은 정보를 data에 저장
- data에 담기까지 시간이 걸리므로 optional chaining을 활용해 데이터 표기

'Vue2' 카테고리의 다른 글
Vue with DRF (5) - Authentication & Authorization (0) | 2022.11.14 |
---|---|
Vue with DRF (3) - CREATE (0) | 2022.11.14 |
Vue with DRF (2) - 장고 서버에서 데이터 받기 (0) | 2022.11.14 |
Vue with DRF (1) - AJAX 요청 준비 (0) | 2022.11.14 |