我已将 peshanghiwa/vue-awesome-paginate 添加到我的 laravel 11 /vuejs 3 应用程序中,并在 resources/js/app.js 中声明了 VueAwesomePaginate:
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
// Vue.component("broadcaster", require("./components/Broadcaster.vue").default);
// Vue.component("viewer", require("./components/Viewer.vue").default);
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Multiselect from '@vueform/multiselect'
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue'),
),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.use(ElementPlus)
.component('inertia-link', Link)
.component('vue-awesome-paginate', VueAwesomePaginate)
.component('file-upload', VueUploadComponent)
.component('multiselect', Multiselect)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
但是当我在 vue 文件中使用它时:
<template>
...
<div class="p-2" v-show="totalTicketsCount > 1">
<vue-awesome-paginate
:total-items="totalTicketsCount"
:items-per-page="backendItemsPerPage"
:max-pages-shown="5"
v-model="currentPage"
@click="paginateClick"
/>
</div>
</template>
在上面的文件中我没有声明分页组件 - 我认为它必须是全局的......
我在控制台中看到错误:
app.js:44 [Vue warn]: Component is missing template or render function:
{install: ƒ}
at <VueAwesomePaginate total-items=8 items-per-page=2 max-pages-shown=5 ... >
at <PersonalLayout>
at <PersonalTicketsList errors=
{}
auth=
{user: {…}, loggedUserIsAdmin: false, loggedUserIsManager: false, loggedUserIsSalesperson: false}
ziggy=
...
并且分页不可见。
我该如何定义组件才能使其工作?