Vuetify SSR 分页

【问题标题】：Vuetify SSR paginationVuetify SSR 分页
【发布时间】：2023-03-08 12:27:01
【问题描述】：

我正在尝试使用 vuetify 分页组件和 nuxt.js 构建分页，但它不适用于服务器端渲染。

我使用来自https://github.com/vuetifyjs/vuetify/issues/4855 的代码添加了 nuxt.js 链接。它在客户端工作，但在服务器端它返回错误“渲染函数或模板未在组件中定义：匿名”

有人知道如何构建正确的 SSR 分页或如何修复我的解决方案吗？

【问题讨论】：

这不是实际错误。重新启动您的应用程序并显示第一条错误消息。并且 vuetify 在 SSR 上工作正常

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

不知道这个线程是否仍然有效，但这是我使用 nuxt 进行 vuetify 分页的解决方案。

 <script>
import PostList from "@/components/site/PostList";
import axios from "axios";
export default {
  components: {
    PostList
  },
  watchQuery: ["page"],
  async asyncData({ $axios, query }) {
    try {
      const page = query.page || 1;
      let { data } = await $axios.get("/articles/?page=" + page);
      return {
        posts: data.data,
        page: data.current_page,
        totalPages: data.last_page
      };
    } catch (e) {
      //  console.log(e); display errors
    }
  },
  methods: {
    next() {
      this.$router.push({ query: { page: this.page } });
    }
  }
};
</script>

<template>
      <v-pagination v-model="page" :length="totalPages" @input="next"></v-pagination>
</template>

【讨论】：