我正在尝试用Laravel 9和Vue 3实现分页,但这是我第一次这样做,我不知道该怎么做。
首先,我导入了我的库:
import { Link } from '@inertiajs/inertia-vue3';
第二,我在components
文件夹中有我的组件分页。
<script setup>
import { Link } from '@inertiajs/inertia-vue3';
defineProps({
data: {
type: Object,
default: () => ({}),
},
});
</script>
<template>
<div v-if="data.links.length > 3" class="flex justify-center mt-4 space-x-4">
<Link
v-for="(link, k) in data.links"
:key="k"
class="px-4 py-3 text-sm leading-4
bg-white rounded hover:bg-white
focus:text-indigo-500 hover:shadow"
:class="{'bg-indigo-400 text-white': link.active}"
:href="link.url"
v-html="link.label"
/>
</div>
</template>
第三步,将组件导入到另一个组件中:
<!-- ... -->
</table>
<pagination :data="preContracts" />
</template>
<script>
import usePrecontract from "../composables/precontract"
import { onMounted, defineComponent } from 'vue'
import pagination from "../components/pagination"
import { Head } from "@inertiajs/inertia-vue3";
import { Link } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";
export default defineComponent({
name: 'datatablePreContracts',
setup() {
const { preContracts, getPrecontract, deletePrecontract, queryForKeywords } = usePrecontract()
onMounted(getPrecontract)
function remove(id) {
deletePrecontract(id)
}
function searchId(action) {
let id = document.getElementsByClassName('id_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchName(action) {
let id = document.getElementsByClassName('name_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function searchPhone(action) {
let id = document.getElementsByClassName('phone_search')[0].value
const params = [action, id];
queryForKeywords(params)
}
function contract(action) {
alert("llego contract -> " + action);
}
function edit(action) {
alert("llego edit -> " + action);
}
function show(action) {
alert("llego show -> " + action);
}
function installation(action) {
alert("llego installation -> " + action);
}
return {
preContracts,
remove,
searchId,
searchName,
searchPhone,
contract,
edit,
show,
installation
}
}
})
</script>
在app.js
中,我有以下代码:
import pagination from './components/pagination';
const app = createApp({
components: {
datatableUsers,
datatableRoles,
datatablePermissions,
datatablePrecontract,
pagination
}
}).mount('#app')
但是当我的页面加载时,我在控制台中有这个:
无法解析组件:分页如果这是本机自定义元素,请确保通过compilerOptions.isCustomElement.at将其从组件解析中排除
我不知道我做错了什么。有人能帮我吗?
- 更新**
在@Angelina的帮助下,我解决了网络浏览器控制台中的问题:
在app.js
中,我更改了以下内容:
const app = createApp({
components: {
datatableUsers,
datatableRoles,
datatablePermissions,
datatablePrecontract,
}
})
app.component('pagination', pagination);
app.mount('#app')
然后我挂载了组件,但是现在我的分页没有显示:
<pagination :data="preContracts.links" />
- 更新2**
{,…}
data: [{id: 10000, id_date: 0, id_commercial: 35, numerical_serie: 0, co_owner: 0, simplify: 0,…},…]
links: {first: "http://www.crm.local:8081/api/preContractApi?page=1",…}
meta: {current_page: 1, from: 1, last_page: 100,…}
这是我控制台里的数据。
谢谢你的帮助,对不起,我的英语不好。
3条答案
按热度按时间8oomwypt1#
你可能会找到答案。
在根组件的
components
选项中注册组件并不能使它们成为全局组件,这样做只是使它们对根组件本身可用,而不是其子组件。要全局注册组件,请在顶级代码中使用
app.component
。ki1q1bka2#
你已经准备好了解决方案,为什么你要重新发明whell?安装真的很简单,而且有据可查。
https://laravel-vue-pagination.org/
wqsoz72f3#
对不起这个答案,但我相信我找到我的问题...我有这个en我的控制器:
这将返回一个集合,其中包含来自合同和我的分页链接的所有信息。
但是当我构建我的axios petition时,返回这个:
但当我尝试访问链接时,在Web浏览器控制台中返回:
如果我对
preContract.links
执行console.log,则返回undefined
但是在我的请愿书里...我不知道我做错了。我的table上完美地摆满了这个图案:
还有我所有的数据都没问题。
我的问题是,由于一个奇怪的原因,我无法访问链接。