jlrdw's avatar
Level 75

Alpine JS x-data

When I have a lookup table I currently have a modal inside an object, that way I have full control and I can have a search and have pagination. All works just fine. And I use axios js to return the data.

An example https://laracasts.com/discuss/channels/laravel/can-i-redirect-a-get-request-to-a-post-request-for-inertia-partial-reloads?page=1&replyId=905775

However, would alpine js x-data also load a full page in a similar way, meaning to have a search and maintain pagination? Or is x-data only for simple showing of some data?

The examples seem to be always in a div element which wouldn't be full page?

0 likes
6 replies
vincent15000's avatar

Why not ?

It depends on where you declare the x-data.

For example if you can add x-data to the layout or at least to the parent tag of the page, it could probably work.

1 like
jlrdw's avatar
Level 75

@vincent15000 I may just try it later when I get time. I just thought someone has used it for full page load.

1 like
vincent15000's avatar
Level 63

@jlrdw Well ... not really tried with a look up table.

But in an application, I needed to have reactive properties (user ids for connected users via a presence channel) in the whole website. So I tried to declare x-data directly in the template blade file. This allows me to handle these reactive properties everywhere I need them in all pages.

So the x-data is declared in one file (template) and I use the reactive properties in some other files (views).

It works fine.

1 like
jlrdw's avatar
Level 75

I did a quite a bit of searching and it seems I cannot find any example of Alpine jS loading a whole web page.

But I was just curious whether I should try alpine js or not.

I will stick with using server fetched partials and an object.

1 like
jlrdw's avatar
Level 75

@vincent15000 I never got a full page load. So i'm sticking with regular java script and axios js.

1 like

Please or to participate in this conversation.