작성
·
199
0
<template>
<div>
<h2>게시글 등록</h2>
<hr class="my-4" />
<form @submit.prevent="save">
<div class="mb-3">
<label for="title" class="form-label">제목</label>
<input
v-model="form.title"
type="text"
class="form-control"
id="title"
/>
</div>
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea
v-model="form.content"
class="form-control"
id="content"
rows="3"
></textarea>
</div>
<div class="pt-4">
<buttont
type="button"
class="btn btn-outline-dark me-2"
@click="goListPage"
>목록</buttont
>
<button class="btn btn-primary">저장</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { createPost } from '@/api/posts';
const router = useRouter();
const form = ref({
title: null,
content: null,
});
const save = () => {
try {
createPost({
...form.value,
createdAt: Date.now(),
});
router.push({ name: 'PostList' });
} catch (error) {
console.log(error);
}
};
const goListPage = () => router.push({ name: 'PostList' });
</script>
<style lang="scss" scoped></style>
index.js 에서는
{
path: '/posts',
name: 'PostList',
component: PostListView,
},
.. 로 정의 했고요
api/posts.js
export function createPost(data) {
return axios.post('http://localhost:5000/posts', data);
}
※ PostCreateView.vue 에서 save 함수는
const save = () => {
try {
createPost({
...form.value,
createdAt: Date.now(),
});
router.push({ name: 'PostList' });
} catch (error) {
console.log(error);
}
};
위 전체 소스 중 위 부분입니다.
크게 복잡한 내용이 아니라고 생각되고 있는데 ..
코딩님 위에 내용 보시고 혹시 더 확인하고 싶은 부분이 있으시면 말씀해 주세요.
확인 하고 다시 질문 드리겠습니다.
번거롭게 해드려 죄송하네요. 감사합니다.
답변 정말 감사드립니다. ('오타' 보다 '원인'을 알게 해주셨읍니다.)
전 다음 강의 들으러.... 그럼 2000 ^^;