[ Vue.js ] 게시판만들기 (Update, Delete)

detail components

게시글 클릭했을 때, 상세 페이지 만들기

 

Read.vue

<tr v-for="(value,i) in data" :key=i @click="detail(i)">

기존 Read 컴포넌트에서 onClick 이벤트를 이용해서 detail 컴포넌트로 이동하는 함수를 실행시킨다. 

 

detail(i){
            this.$router.push({
                //params를 넘겨줄때에는 push할때 path보단 name을 사용
                name: 'Detail',
                params: {
                    contentId: i
                }
            })
        }

route.js

import Detail from "./components/Detail";

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/detail/:contentId",
            name: "Detail",
            component: Detail
        },
    ]
});

해당 게시글 data만을 불러와서 화면에 출력하기 위해서, URL 파라미터를 이용한다.

:contentid 라는 파라미터를 path에 붙힌다. 

 

Detail.vue

<template>
    <div>
        <div>{{ data.writer }}</div>
        <div>{{ data.title }}</div>
        <div>{{ data.content }}</div>
        <button @click="updateData">수정</button>
        <button @click="deleteData(index)">삭제</button>        
    </div>
</template>

<script>
import data from '@/data';
export default {
    name: 'detail',
    data() {
        const index = this.$route.params.contentId
        return {
            data: data[index],
            index: index
        }
    },
    methods: {
        // 특정인덱스인 값을 삭제할 때 사용함
        deleteData() {
            data.splice(this.index, 1)
            this.$router.push({
                path:"/"
            })
        },
        updateData() {
            this.$router.push({
                name: 'Create',
                params: {
                    contentId: this.index
                }
            })
        }
    },
}
</script>

 

$route.params 를 통해서 파라미터의 값을 받아올 수 있다. 

파라미터로 받은 index를 이용해서 모든 data가 아닌 해당 게시글의 data만 변수로 만든다. 

그리고 데이터를 화면에 출력하고,  수정과 삭제라는 버튼을 새로 추가한다. 

그리고 각각의 버튼에 onClick 이벤트를 지정한다. 

 

 

삭제 기능

deleteData() {
            data.splice(this.index, 1)
            this.$router.push({
                path:"/"
            })
        },

splice()라는 함수를 이용한다. 

splice( index, 삭제 개수)  해당 인덱스 위치부터 원하는 개수만큼 data를 삭제한다. 

해당 index의 data를 삭제하고, 다시 Read 컴포넌트로 이동시킨다. 

 

 

수정 기능

updateData() {
            this.$router.push({
                name: 'Create',
                params: {
                    contentId: this.index
                }
            })
        }
    },

수정은 Create 화면과 동일한데, 기존의 내용들을 input 태그에 보여줘야하고, 작성이아닌 수정 버튼으로 보이도록 바꿔줘야한다. 

 

그러기 위해서는 역시 파라미터가 필요하기 때문에 라우터 설정을 변경해준다. 

 

router.js

path: "/create/:contentId?"

기존 Create의 path를 변경한다. 

contentId 뒤에 "?" 를 붙힌 이유는 수정하는 경우가아니라 글을 작성하는 경우에는 파라미터가 없기 때문이다.

파라미터가 없을 경우에도 정상적으로 컴포넌트를 라우팅할 수 있도록 "?"를 붙혀주는 것이다. 

 

Create.vue

data() {
        const index = this.$route.params.contentId;
        return {
            data: data,
            index: index,
            writer: index !== undefined ? data[index].writer : "", 
            title: index !== undefined ? data[index].title : "",
            content: index !== undefined ? data[index].content : "",
        }
    },

우선 데이터를 수정해줘야한다.

게시글을 수정할 경우 (파라미터가 존재할경우) 해당 값을 받아와서 변수에 초기화 

하지만, 파라미터가 없는 경우에는 ""로 초기화 

위의 과정을 삼항연산자를 이용해서 구현한 것이다. 

 

 

그리고, 버튼도 수정과 작성 두가지가 존재하기 때문에 삼항 연산자를 이용해서 구현한다.

<button @click="index !== undefined ? update() : write()">{{ index !== undefined ? "수정" : "작성" }}</button>

 

update()

 

update() {
            data[this.index].writer = this.writer
            data[this.index].title = this.title
            data[this.index].content = this.content
            this.$router.push({
                path:"/"
            })
        }

 

 

 

정상적으로 수정되는 것을 확인할 수 있다.