inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Pagination & Filter 구현하기

header값이 들어오지 않습니다

656

cmy9707

작성한 질문수 3

0

_limit:3을 줬는데

headers에 x-total값이 나오지 않습니다ㅜㅜ!

PostListView.vue

<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"
          :create-at="post.createAt"
          @click="goPage(post.id)"
        ></PostItem>
      </div>
    </div>
    <nav class="mt-5" aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <hr class="my-5" />
    <AppCard>
      <PostDetailView :id="2">
        <!-- index.js에서 PostDetailView안에 props가 true이면 화면에 나옴 -->
      </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/post';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const posts = ref([]);

const params = ref({
  _sort: 'createAt',
  _order: 'desc',
  _limit: 3,
});

// pagination
const fetchPosts = async () => {
  try {
    const { data } = await getPosts(params.value);
    posts.value = data;
  } catch (error) {
    console.error(error);
  }
};
fetchPosts();

const goPage = id => {
  // router.push(`/posts/${id}`);
  router.push({
    name: 'PostDetail',
    params: {
      id,
    },
  });
};
</script>

 

vue.js

답변 2

0

cmy9707

해결했습니다! 감사합니다 :)

0

짐코딩

안녕하세요 :)

두 가지 체크해보시겠어요?

  1. 개발자도구 posts 요청의 Payload 탭에서 파라미터가 정상적으로 넘어갔는지 확인해보시겠어요?

  2. response 값을 콘솔에 출력해보시겠어요?

const response = await getPosts(params.value);
console.log(response)

질문드립니다.

0

29

0

unplugin-vue-components 질문드립니다.

0

33

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

_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.

0

63

1

@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