Alpine.js Laravel Jetstream 组件中的“paginationData 未定义”错误

Question

我正在使用 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。控制台错误：

尽管显示了页码，表明代码已成功加载，但我仍然收到错误。

我已尝试以下故障排除步骤：

验证导入是否正确并且分页数据是否正确定义。
使用 php artisan view:clear 和 php artisan cache:clear 清除了 Laravel 缓存。
重新启动开发服务器。
检查与 Livewire 是否存在冲突。

尽管进行了这些尝试，错误仍然存在。可能是什么原因导致此问题？我应该检查或调整哪些内容来解决该问题？来自 Alpine.js 社区的任何见解或建议将不胜感激。

Answer 1

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()

Alpine.js Laravel Jetstream 组件中的“paginationData 未定义”错误

问题描述投票：0回答：1

1个回答

最新问题

Alpine.js Laravel Jetstream 组件中的“paginationData 未定义”错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1