laravel livewire click is not triggering

Question

below is my App/Http/Livewire/Test.php file

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $name = 'mike';

    public function render(){
        return view('livewire.test');
    }
    public function clickTest(){
        $this->name = 'Joe';
    }
}

below is my resources/views/livewire/test.blade.php

<div>
    hello {{$name}}
</div>

and below is my resources/views/test.blade.php

<html>
<head>
    <title>test page</title>
    @livewireStyles
    <script src="{{ asset('js/app.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div>
        <livewire:test />   //this line is working fine
        <button wire:click="clickTest">test</button>  //this line is not working
    </div>


    @livewireScripts
</body>
</html>

I am able to get hello mike on page load but when I click on the test button it's not changing to Joe. When I checked on my network tab, it looks like the click event is not even triggered and it's not able to reach clickTest() function

spekulatius spekulatius · Accepted Answer · 2021-05-30T06:27:57

Your button needs to be moved into the component:

<div>
    hello {{$name}}
    <button wire:click="clickTest">test</button>
</div>

laravel livewire click is not triggering

1 Answers