수정, 삭제 기능 구현

VUE-TIL프로젝트에 수정, 삭제 기능을 구현해보자.

기능 구현의 flow는 다음과 같다.

1. view 컴포넌트 생성.
2. route 생성 및 컴포넌트 연결.
3. api function 생성.
4. 컴포넌트 methods 생성 및 api 연결

수정

수정의 경우 별도의 수정 view 컴포넌트가 필요하기 때문에 생성한다.

{
  path: '/post/:id',
  component: () => import('@/views/PostEditPage.vue'),
},

// PostEditPage.vue
<template>
  <div class="form-container">
    <PostEditForm></PostEditForm>
  </div>
</template>

<script>
import PostEditForm from '@/components/posts/PostEditForm.vue';

export default {
  components: {
    PostEditForm,
  },
};
</script>

<style></style>

// PostEditForm.vue
<template>
  <div class="contents">
    <h1 class="page-header">Edit Post</h1>
    <div class="form-wrapper">
      <form class="form" @submit.prevent="submitForm">
        <div>
          <label for="title">Title:</label>
          <input id="title" type="text" v-model="title" />
        </div>
        <div>
          <label for="contents">Contents:</label>
          <textarea id="contents" type="text" rows="5" v-model="contents" />
          <p
            v-if="!isContentsValid"
            class="validation-text warning isContentTooLong"
          >
            Contents length must be less than 250
          </p>
        </div>
        <button type="submit" class="btn">Edit</button>
      </form>
      <p class="log">
        {{ logMessage }}
      </p>
    </div>
  </div>
</template>

<script>
import { fetchPost, editPost } from '@/api/posts';

export default {
  data() {
    return {
      title: '',
      contents: '',
      logMessage: '',
    };
  },
  computed: {
    isContentsValid() {
      return this.contents.length <= 200;
    },
  },
  methods: {
    submitForm() {
    },
  },
};
</script>

EditPage로 접근 시 해당 게시물의 정보를 가져와야 하기 때문에 게시물 호출 api를 생성한다.

function fetchPost(postId) {
  return posts.get(postId);
}

export { fetchPost };

생성한 api를 component에서 사용한다.

<script>
import { fetchPost } from '@/api/posts';

async created() {
  const { data } = await fetchPost(this.$route.params.id);
  this.title = data.title;
  this.content = data.content;
}
</script>

이제 Edit버튼을 누르면 form이 submit되면서 실행되는 submitForm() 메소드를 구현한다.
먼저, api를 생성하자.

function editPost(postId, postData) {
  return posts.put(postId, postData);
}

export { editPost };

pathVariable로 필요한 postId, formData로 필요한 postData를 인자로 받고 호출한다.

<script>
import { editPost } from '@/api/posts';

methods: {
  async submitForm() {
    try {
      await editPost(id, {
        title: this.title,
        contents: this.contents,
      });
      this.$router.push('/main');
    } catch (err) {
      console.log(err);
    }    
  }
}
</script>

editPost function을 import 받아오고, 인자를 각각 넘기고, 실행이 완료되면 /main 페이지로 이동시킨다.

삭제

// api/posts.js

function deletePost(postId) {
  return posts.delete(postId);
}

export { deletePost };

axios의 delete함수를 이용하며, postId를 pathVariable로 사용한다.

// componenets/posts/PostListItem.vue

<script>
import { deletePost } from '@/api/posts';

methods: {
  async deleteItem() {
    if (confirm('You want to delete it?')) {
      await deletePost(this.postItem._id);
      this.$emit('refresh');
    }
    // console.log('deleted');
  },
}
</script>