1

<a>2 つのタグを使用して、ブログ ページの特定の投稿をページ分割しようとしています。

Prismic Pagination APIによると、これを実現するには?page=1、 などのパラメーター link を渡すのと同じくらい簡単example.com/blog/?page=1ですが、何も変わりません。

非同期関数内にあるコンポーネント インスタンスを使用して変更できない場合、オプションを照会するにはどうすればよいですか?pageasyncData()

pages/blog/index.vue:

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <h2>{{ content }}</h2>
    <section class="columns is-multiline is-centered">
      <article
        class="post box column is-3-widescreen is-4-tablet"
        v-for="(post, index) in posts"
        :key="index"
      >
        <nuxt-link :to="`/blog/${post.uid}`">
          <img :src="post.data.image.url" alt />
          <h3 class="title is-6">{{ Dom.RichText.asText(post.data.title) }}</h3>
        </nuxt-link>
      </article>
    </section>

    <!-- I want to PAGINATE my posts from here -->
    <nav class="pagination column">
      <a class="pagination-previous button is-black">&#x3c;</a>
      <a class="pagination-next button is-black">&#x3e;</a>
    </nav>
  </div>
</template>

<script>
import Prismic from 'prismic-javascript'
import PrismicDOM from 'prismic-dom'
import { initApi, generatePageData } from '@/prismic.config'

export default {
  data() {
    return {
      Dom: PrismicDOM,
      title: 'Blog',
      content:
        'Welcome to my blog. Browse through a streamline of tech tutorials that suits you needs.'
    }
  },

  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.content
        }
      ]
    }
  },

  asyncData(context) {
    if (context.payload) {
      return generatePageData('blog_page', context.payload)
    } else {
      return initApi().then(api => {
        return api
          .query(Prismic.Predicates.at('document.type', 'blog_posts'), {
            pageSize: 3,
            page: 1
          })
          .then(response => {
            return generatePageData('blog_page', response.results)
          })
      })
    }
  }
}
</script>
4

1 に答える 1

1

これを機能させるには、変更に反応するようにwatchQueryをセットアップする必要があります。ドキュメントから：

クエリ文字列を監視し、変更時にコンポーネント メソッドを実行する (asyncData、fetch、validate、layout など)

// inside page.vue
export default {
  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
  watchQuery: ['page']
}

ページが監視されているので、NuxtLink を使用してクエリ文字列 param を更新できます。 

<nuxt-link :to="`/blog?page=${page_num}`"

また、asyncData 内ではコンポーネントにアクセスできませんが、コンテキストオブジェクトにはアクセスできます。

export default {
  asyncData (context) {
    return axios.get(`https://my-api/posts?page=${context.query.page}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}
于 2019-08-05T15:33:57.097 に答える