Reputation: 380
I am being researching and following the tutorials online to get some help as I am trying to use the Livewire - lazyload feature on the laravel app. I have tried most of the function but apparently none of them work.
As I am using laravel 11 and livewire 3 and have created a very simple page using wire:click on button, but it does not perform any action.
When I click the button, I should get the text "test - success" but it shows nothing. Not only with wire:click, any feature I use from the Livewire website, it will not respond.
welcome.blade.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test lw</title>
@livewireStyles
</head>
<body>
<div>
<button wire:click="save" type="button">test now</button>
</div>
@livewireScripts
</body>
</html>
Testlivewire.php (App\Livewire\Testlivewire.php)
class Testlivewire extends Component
public function save()
{
//return 'test - pass'
return view('livewire.testlivewire');
}
public function render()
{
return view('livewire.testlivewire');
}
Upvotes: 0
Views: 274
Reputation: 380
I figured it out and its not from the tutorials or videos i watched. This can help others.
Testlivewire.php (App\Livewire\Testlivewire.php)
Inside the render() function,
public function render()
{
return <<<'HTML'
<div>
<button wire:click="save" class="btn btn-rounded btn-sm color1 float-end">search now</button>
</div>
HTML;
}
and then inside your welcome.blade
<livewire:testlivewire lazy="true"/>
so if you remove the button from you blade and replace with your component, this will render and inside the render() function, the button will be displayed. When clicked, it will perform the logic you want to apply.
Hope this can help others.
Upvotes: 0