Level 31
Do you have the Livewire Styles and Scripts setup on your layouts blade file?
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
https://laravel-livewire.com/docs/2.x/quickstart#install-livewire
Jul 19, 2024
14
Level 1
livewire button not working why
while clicking on the button it is not working
namespace App\Http\Livewire;
use Livewire\Component;
class TestComponent extends Component
{
public $title ="hy i am";
public function change()
{
$this->title = 'changed';
}
public function render()
{
return view('livewire.test-component')->layout('layouts.app');
}
}
the mentioned above is a simple function code just for while clicking want to change the message
<div>
<button wire:click="change">Click Me</button>
{{$title}}
</div>
in which i am using livewire:"^2.12" php:"^8.1" laravel:10.0
Level 1
yes,the output is also showing but the wire:click is not working
Level 1
but in which while giving the code
<head>
{
............
..........
}
@livewireStyles
......
<main class="main">
<livewire:test-component/>
</main>
{
..........
........
}
@livewireScripts
</html>
this is my layout file and i call the component direcly it works while calling with
@extends('layouts.onix')
@section('content')
<div>
<button wire:click="change">Click Me</button>
{{$title}}
</div>
@endsection
and the layout file
<div class="app-body">
<main class="main">
@yield('content')
</main>
</div>
is not working, but why? also i have set the route too.
Level 31
It does not work because you are not using the component correctly.
For your layout file
<html>
<head>
// other assets
@livewireStyles
</head>
<body>
<div class="app-body">
<main class="main">
@yield('content')
</main>
</div>
@livewireScripts
</body>
</html>
Then in your blade file
@extends('layouts.onix')
@section('content')
<div>
<livewire:test-component/>
{{$title}}
</div>
@endsection
Level 1
Level 31
The first method works because you are using the component <livewire:test-component/> which has the <button wire:click="change">Click Me</button> in it and makes the call back to your Livirewire component class TestComponent extends Component.
The second method you only have <button wire:click="change">Click Me</button> which is not aware of you component class TestComponent extends Component
Level 1
@migsAV ok so,how should i want to change my code!..can you please get me a example code snippet why because we cannot prepare layouts for each function right?
Level 31
@Mohammedkichu have you tried the code snippet above?
Level 1
@migsAV which one are you saying?
Level 31
It does not work because you are not using the component correctly.
For your layout file
<html>
<head>
// other assets
@livewireStyles
</head>
<body>
<div class="app-body">
<main class="main">
@yield('content')
</main>
</div>
@livewireScripts
</body>
</html>
Then in your blade file
@extends('layouts.onix')
@section('content')
<div>
<livewire:test-component/>
{{$title}}
</div>
@endsection
Level 1
@migsAV ok in which i want to create total 3 files *layout.blade.php *test-component.blade.php *and for giving this
@section('content')
<div>
<livewire:test-component/>
{{$title}}
</div>
@endsection
i want to create another blade.php file and by giving route it will works that i know
i am asking to work directly https://laravel-livewire.com/docs/2.x/actions
Level 31
Have you tried watching the Livewire screencasts? This will guide you.
Level 1
I am asking you for , is that possible to call the livewire component directly without making <livewire:componentname/>in another blade files
Level 31
@Mohammedkichu No it's not possible. You would need to use either
<livewire:componentname/>
or
@livewire('componentname')
to use the Livewire component
Please or to participate in this conversation.