_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
63
작성한 질문수 8
<template>
<div>
<h2>게시글 목록</h2>
<hr class="my-4" />
<form @submit.prevent>
<div class="row g-3">
<div class="col">
<input
v-model="params._title_like"
type="text"
class="form-control"
/>
</div>
</div>
</form>
<hr class="my-4" />
<!-- list : row 가로 정렬 -->
<div class="row g-3">
<div v-for="post in posts" :key="post.id" class="col-4">
<PostItem
:title="post.title"
:content="post.content"
:create-at="post.createAt"
@click="goPage(post.id)"
></PostItem>
</div>
</div>
<!-- list -->
<!-- 페이지네이션 -->
<nav
class="mt-4 d-flex justify-content-center"
aria-label="Page navigation example"
>
<ul class="pagination">
<li class="page-item" :class="{ disabled: params._page <= 1 }">
<a
class="page-link"
href="#"
aria-label="Previous"
@click.prevent="--params._page"
>
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="pageNum in pageCount" :key="pageNum" class="page-item">
<a class="page-link" href="#" @click.prevent="params._page = pageNum">
{{ pageNum }}</a
>
</li>
<li class="page-item" :class="{ disabled: params._page >= pageCount }">
<a
class="page-link"
href="#"
aria-label="Next"
@click.prevent="++params._page"
>
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<hr class="my-4" />
<AppCard v-if="posts.length > 0">
<PostDetailView :id="posts[0].id" />
</AppCard>
<!-- <router-view></router-view> -->
<!-- <PostDetailView></PostDetailView> -->
</div>
</template>
<script setup>
import PostItem from "@/components/posts/PostItem.vue";
import PostDetailView from "./PostDetailView.vue";
import AppCard from "@/components/AppCard.vue";
import { computed, ref, watchEffect } from "vue";
import { getPosts } from "@/api/posts";
import { useRouter } from "vue-router";
const router = useRouter();
const posts = ref([]);
const params = ref({
_sort: "createAt",
_order: "desc",
_page: 1,
_limit: 3,
_title_like: "",
});
// 페이지네이션 데이터
const totalCount = ref(0);
const pageCount = computed(() =>
Math.ceil(totalCount.value / params.value._limit),
);
const fetchPosts = async () => {
try {
const { data, headers } = await getPosts(params.value);
console.log("params.value", params.value);
console.log("결과:", data);
posts.value = data;
// console.log("posts.value", posts.value);
totalCount.value = headers["x-total-count"];
} catch (err) {
console.log("err", err);
}
// getPosts()
// .then(res => {
// console.log("res", res);
// })
// .catch(err => {
// console.log("err", err);
// });
};
watchEffect(fetchPosts);
// fetchPosts();
const goPage = id => {
// router.push(`posts/${id}`);
router.push({
name: "PostDetail",
params: {
id,
},
});
};
</script>
<style lang="scss" scoped></style>기본값을 "" 을 주니 안나오는데 코드에 문제가 있을까요 ㅜㅜ?

답변 1
0
안녕하세요.
JSON Server는 _title_like=""로 요청하면 제목이 빈 문자열인 게시글만 찾으려고 시도합니다. 당연히 그런 데이터는 없으니 빈 배열이 반환되는 거죠.
방법 : 초기값을 undefined로 설정
const params = ref({
_sort: "createAt",
_order: "desc",
_page: 1,
_limit: 3,
_title_like: undefined, // "" 대신 undefined
});
질문드립니다.
0
29
0
unplugin-vue-components 질문드립니다.
0
32
2
강의듣다가 헷갈려서 질문드립니다.
0
28
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
27
1
질문드립니다.
0
28
2
라우터 인스톨 후 실행안됨
1
47
2
코드 자동 포매팅 질문
0
67
2
필터 watchEffect 질문입니다.
0
50
1
json-server 오류가 다른게 뜨네요
0
111
1
미리보기가 안됩니당...
0
68
2
unplugin-vue-components
0
79
2
TypeError 질문
0
49
1
v-model="show" :show="show" 같이 사용?
1
53
1
hash 모드 배포의 필요성?
0
59
2
.eslintrc.cjs 가 없습니다
0
95
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
97
3
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
69
2
중첩된 컴포넌트 문제
0
74
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
113
1
axios timeout
0
324
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
121
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
167
2
This dependency was not found:
0
140
2





