我正在使用 Alpine.js 和 Livewire 开发 Laravel Jetstream 项目。我在控制台中遇到错误,表明 paginationData 未定义,尽管已将其正确导入到我的 app.js 文件中并在单独的模块中声明它。
这是我当前的设置:
1。在app.js中导入:
import Alpine from 'alpinejs';
import paginationData from './alpine/pagination-stepper.js';
Alpine.data('paginationData', () => paginationData);
Alpine.start();
console.log('Alpine started');
2。 pagination-stepper.js中paginationData的定义:
const paginationData = {
currentPage: 1,
perPage: 5,
totalCount: 10,
get paginatedData() {
const start = (this.currentPage - 1) * this.perPage;
const end = start + this.perPage;
return Array.from({ length: this.totalCount }, (_, i) => i + 1).slice(start, end);
},
nextPage() {
if (this.currentPage < Math.ceil(this.totalCount / this.perPage)) {
this.currentPage++;
}
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
}
};
export default paginationData;
3. welcome.blade.php 中的用法:
<section x-data="paginationData">
<div>
Current Page: <span x-text="totalCount"></span>
</div>
</section>
它确实显示当前页码
4。控制台错误:
尽管显示了页码,表明代码已成功加载,但我仍然收到错误。
我已尝试以下故障排除步骤:
尽管进行了这些尝试,错误仍然存在。可能是什么原因导致此问题?我应该检查或调整哪些内容来解决该问题?来自 Alpine.js 社区的任何见解或建议将不胜感激。
Livewire3 自动加载 Alpine。有特殊的方法来定制它。 https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine
// layout blade
<body>
@livewireScriptConfig
</body>
// app.js
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import paginationData from './alpine/pagination-stepper.js';
Alpine.data('paginationData', () => paginationData);
Livewire.start()