Livewire resize But...
2024 laravel conf demo transfer big size to small size.
https://www.youtube.com/watch?v=VmXbw9GU1SU&t=7484s
2:02:00 Start livewire
ListPost.php
public function render()
{
return view('livewire.list-post');
}
public function t()
{
info('t');
}
list-post.blade.php
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>List Post</h1>
<div>
<button wire:click="t" class="btn btn-primary">T</button>
</div>
<div style="height:100px; overflow: auto; margin-top: 30px;">
<livewire:all-post />
</div>
</div>
</div>
</div>
</div>
AllPost.php About 5MB datas
public $Posts;
public function mount()
{
$this->Posts = collect();
for ($i = 0; $i < 10000; $i++) {
$this->Posts->push(collect([
'title' => 'Post Title ' . $i,
'content' => 'Post Content ' . $i,
]));
}
}
public function render()
{
return view('livewire.all-post');
}
all-post.blade.php
<div>
<div>
@foreach ($Posts as $post)
<div class="card">
<div class="card-header">
{{ $post['title'] }}
</div>
<div class="card-body">
{{ $post['content'] }}
</div>
</div>
@endforeach
</div>
</div>
Yes, wire:click again 5MB -> xxK, if use <livewire:all-post />
But usually we need reuse 5MB datas from children, So how to reuse.
Alpine.js
list-post.blade.php
<div x-data="{posts: {}}" >
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>List Post</h1>
<div>
<button wire:click="t" class="btn btn-primary">T</button>
<button @click="$wire.$refresh()" class="btn btn-primary">T2</button>
<button @click="console.log(posts)">console posts</button>
<button @click="console.log(posts[0])">console post</button>
</div>
<br>== get posts one post =</br>
<template x-if="posts[0]">
<div>
<span x-text="posts[0].title"></span>
</div>
</template>
<br>-- X-for -</br>
<div style="height:100px; overflow: auto">
<ul>
<template x-for="k in posts">
<li>
<span x-text="k.title"></span>
</li>
</template>
</ul>
</div>
<div style="height:100px; overflow: auto; margin-top: 30px;">
<livewire:all-post />
</div>
</div>
</div>
</div>
</div>
- add x-data on top
- add show data info for check is correct
- wire:click=“t” for test wirk:click again, other button just check datas
all-post.blade.php
<div x-data="" x-init="posts = $wire.Posts;">
<button @click="posts = $wire.Posts;">console post</button>
<div>
<div style="height:100px; overflow: auto">
<ul>
<template x-for="k in posts">
<li>
<span x-text="k.title"></span>
</li>
</template>
</ul>
</div>
</div>
</div>
x-init get Posts –set–> parent x-data posts, then Alpine “x-ooxx” can use posts.
Button just for test.
Now parent posts get children give(set) data info (values).
Click button send network request. Still small size.