-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
코드 수정 문의
23.02.22 17:27 작성 조회수 298
0
강의 해주신 내용과 코드를 동일하게 작성했는데 게시판이 작성되지 않습니다.
코드쪽 리뷰는 어떻게 문의 드리면 되나요?
답변을 작성해보세요.
0
짐코딩
지식공유자2023.02.22
안녕하세요 :)
구체적으로 질문을 남겨주시면 될 것 같아요~!
전체 코드를 작성 하시면서 중간 중간 동작되는건 확인 하셨죠? 어느 순간부터 이슈가 있었는지 구체적으로 남겨주시면 될 것 같습니다.
예를들면) "게시판 글쓰기에서 에러가 나요"(코드도 보여주시면 좋겠죠?)
// 내 코드
sungmin_hwang
질문자2023.02.27
문의 : CRUD 구현 강의 중 게시글 목록에 작성한 새글이 등록되지 않습니다.
수정한 코드는 PostListView , PostCreateView 입니다.
// PostListView
<template>
<div>
<h2>게시글 목록</h2>
<hr class="my-4" />
<div class="row g-3">
<div v-for="post in posts" :key="post.id" class="col-4">
<PostItem
:title="post.title"
:content="post.content"
:created-at="post.createdAt"
@click="goPage(post.id)"
></PostItem>
</div>
</div>
<hr class="my-4" />
<AppCard>
<PostDetailView :id="2"> </PostDetailView>
</AppCard>
</div>
</template>
<script setup>
import PostItem from '@/components/posts/PostItem.vue';
import PostDetailView from '@/views/posts/PostDetailView.vue';
import AppCard from '@/components/AppCard.vue';
import { getPosts } from '@/api/posts';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const posts = ref({});
const fetchPosts = async () => {
try {
const { data } = await getPosts();
posts.value = data;
} catch (error) {
console.error(error);
}
};
fetchPosts();
const goPage = id => {
//router.push('/posts/${id}');
router.push({
name: 'PostDetail',
params: {
id,
},
// query: { serchText: 'hello' },
// hash: '@world!',
});
};
</script>
<style lang="scss" scoped></style>
// PostCreateView
<template>
<div>
<h2>게시글 등록</h2>
<hr class="my-4" />
<from @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">
<button
type="button"
class="btn btn-outline-dark me-2"
@click="goListPage"
>
목록
</button>
<button class="btn btn-primary">저장</button>
</div>
</from>
</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.error(error);
}
};
const goListPage = () => router.push({ name: 'PostList' });
</script>
<style lang="scss" scoped></style>
헤더 레이아웃의 글쓰기 버튼을 누른 후 글을 작성하면 목록의 카드에 떠야하는데 뜨지 않고 있습니다. 강사님 코드와 동일한데 이유를 몰라 문의 드려요.
짐코딩
지식공유자2023.02.28
안녕하세요 :)
체크리스트
createPost()
할 때await
으로 비동기 함수실행을 기다려 주시겠어요?혹시 콘솔에 에러가 발생했는지 확인 할 수 있을까요?
db.json
파일에 데이터가 저장 되었나요? 글쓰기 실패인지 조회를 못한건지 확인하기 위함입니다.만약 위 두개를 체크 했음에도 해결이 잘 안된다면 bruce.lean17@gmail.com 메일로 소스를 압축하여 보내주시면 확인 후 도움드릴 수 있도록 하겠습니다. (소스 보내주실 때
node_modules
디렉토리는 제거 후 보내주세요)
// 1번 체크리스트 예시
const save = async () => {
try {
await createPost({
...form.value,
createdAt: Date.now(),
});
router.push({ name: 'PostList' });
} catch (error) {
console.error(error);
}
};
답변 1