728x90
반응형
학습 노트 수정
Today I Learned의 학습 노트를 수정할 수 있는 기능을 구현한다.
학습 노트 수정을 위한 페이지 연결
학습 노트 수정은 수정 페이지에서 진행하려고 한다. 따라서 수정 페이지 진입 시 해당 학습 노트의 고유 ID 값을 가지고 진입을 해야하는데 이 과정에서 Dynamic Routing이 사용된다.
<!-- src/components/posts/PostListItem.vue --> <template> <li> <div class="post-title"> {{ postItem.title }} </div> <div class="post-contents"> {{ postItem.contents }} </div> <div class="post-time"> {{ postItem.createdAt }} <!-- 수정 버튼 클릭 시 routeEditPage 함수 호출 --> <i class="icon ion-md-create" @click="routeEditPage"></i> <i class="icon ion-md-trash" @click="deleteItem"></i> </div> </li> </template> <script> import { deletePost } from '@/api/posts'; export default { props: { postItem: { type: Object, required: true, }, }, methods: { async deleteItem() { if (confirm('You want to delete it?')) { await deletePost(this.postItem._id); this.$emit('refresh'); } }, routeEditPage() { // 수정 페이지로 전환하기 위해 router.push() 사용 const id = this.postItem._id; this.$router.push(`/post/${id}`); }, }, }; </script> <!-- src/routes/index.js --> <script> import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/login', }, { // Dynamic Routing 사용 // 고유 ID 값 가지고 수정페이지 이동 path: '/post/:id', component: () => import('@/views/PostEditPage.vue'), }, { path: '*', component: () => import('@/views/NotFoundPage.vue'), }, ], }); </sciprt>
학습 노트 수정을 위한 특정 게시물 조회
수정을 하기 위해서는 파라미터로 넘어온 고유 ID 값을 가진 기존 데이터를 조회하여 표시하도록 구현해야 한다.
<!-- src/api/posts.js --> <script> // 학습 노트 조작과 관련된 CRUD API 함수 파일 import { posts } from './index'; // 학습 노트 데이터 1개를 조회하는 API function fetchPost(postId) { return posts.get(postId); } export { fetchPost }; </script> <!-- src/components/posts/PostEditForm.vue --> <script> // 특정 학습 노트 조회 API import import { fetchPost } from '@/api/posts'; export default { data() { return { title: '', contents: '', logMessage: '', }; }, computed: { isContentsValid() { return this.contents.length <= 200; }, }, methods: { async submitForm() {}, }, // 컴포넌트가 생성된 후 실행 async created() { // 파라미터로 넘어온 고유 ID값 const id = this.$route.params.id; // 특정 학습 노트 조회 const { data } = await fetchPost(id); // 조회한 데이터 설정 this.title = data.title; this.contents = data.contents; }, }; </script>
학습 노트 수정 기능 구현
조회한 특정 학습 노트 데이터를 수정하는 기능을 구현한다.
<!-- src/api/posts.js --> <script> // 학습 노트 조작과 관련된 CRUD API 함수 파일 import { posts } from './index'; // 학습 노트 데이터 1개를 조회하는 API function fetchPost(postId) { return posts.get(postId); } // 학습 노트 데이터를 수정하는 API function editPost(postId, postData) { return posts.put(postId, postData); } export { fetchPost, editPost }; </script> <!-- src/components/posts/PostEditForm.vue --> <script> // 수정 API 함수 import import { fetchPost, editPost } from '@/api/posts'; export default { data() { return { title: '', contents: '', logMessage: '', }; }, computed: { isContentsValid() { return this.contents.length <= 200; }, }, methods: { async submitForm() { const id = this.$route.params.id; try { // 수정 API 함수 호출 await editPost(id, { title: this.title, contents: this.contents, }); // 수정 완료 시 메인페이지 이동 this.$router.push('/main'); } catch (error) { console.log(error); this.logMessage = error; } }, }, async created() { const id = this.$route.params.id; const { data } = await fetchPost(id); this.title = data.title; this.contents = data.contents; }, }; </script>
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
[Vue.js] Today I Learned - 라우터 심화 (0) | 2020.10.28 |
---|---|
[Vue.js] Today I Learned - 데이터 포맷팅 (0) | 2020.10.28 |
[Vue.js] Today I Learned - 학습 노트 삭제 (0) | 2020.10.28 |
[Vue.js] Today I Learned - API 함수 모듈화 (0) | 2020.10.28 |
[Vue.js] Today I Learned - 학습 노트 생성 (0) | 2020.10.28 |
댓글