Vuetify SSR分页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuetify SSR分页相关的知识，希望对你有一定的参考价值。
我正在尝试使用vuetify分页组件和nuxt.js来构建分页，但它不适用于服务器端渲染。
我使用https://github.com/vuetifyjs/vuetify/issues/4855中的代码添加了nuxt.js链接。它在客户端工作，但在服务器端它返回错误“渲染功能或模板未在组件中定义：匿名”
任何人都知道如何建立正确的SSR分页或如何解决我的解决方案？
答案
不知道这个线程是否仍然有效，但这是我对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>以上是关于Vuetify SSR分页的主要内容，如果未能解决你的问题，请参考以下文章