Liveiwre not firing any Wire: events

#1

Hi all,

Any help here would be appreciated. Just started with Livewire tonight and setup a simple project. I can’t seem to get any wire: events to fire. I’m also not seeing any errors in the browser console nor any errors or any network activity at all for that matter in the XHR console. Livewire 2, Laravel 7.2.

Search.php
<?php

namespace App\Http\Livewire\Search;

use Livewire\Component;

class Search extends Component
{
public $message;

public function render()
{
    $this->message = "Rendered";
    return view('backend.livewire.search.search')
        ->extends('backend.livebase');
}

public function test()
{
    $this->message = "It Works!!";
}

public function resetFilters()
{
    $this->reset('message');
}

}

search.blade.php
@section(‘content’)

<button wire:click="resetFilters()">Reset</button>
<input wire:model="message" type="text">

This {{ $message }}
@endsection(‘content’)

livebase.blade.php

@livewireStyles 
@yield('content')

@livewireScripts
</body>

Dev Console:

image
image961×201 13.4 KB

#2

Sorry, code cutting off… try this again.

    <?php

namespace App\Http\Livewire\Search;

use Livewire\Component;

class Search extends Component
{
    public $message;
    
    public function render()
    {
        $this->message = "Rendered";
        return view('backend.livewire.search.search')
            ->extends('backend.livebase');
    }
	
	public function test()
    {
        $this->message = "It Works!!";
    }

    public function resetFilters()
    {
        $this->reset('message');
    }

}
#3

Hi @gflauder,

Everything looks okay with your code. I can’t see anything particularly strange going on. When you load the page with that input on does it populate on load with “Rendered” or is it empty?

Also might be worth moving this:

into a method called mount in your Search.php file. Should look like this afterwards:

<?php

namespace App\Http\Livewire\Search;

use Livewire\Component;

class Search extends Component
{
    public $message;

    public function mount()
    {
        $this->message = "Rendered";
    }

    public function render()
    {
    
        return view('backend.livewire.search.search')
            ->extends('backend.livebase');
    }

public function test()
    {
        $this->message = "It Works!!";
    }

    public function resetFilters()
    {
        $this->reset('message');
    }
}

Let me know if that helps :slight_smile:

#4

Thanks @wprk for the idea!

I realized my issue was actually a total newbie error. I was trying to layout the blade files in a way I normally do. I missed surrounding the search blade component in it’s own <div> 's and instead had them in @section(‘content’) directives which of course now makes sense and fails I then just changed my search components render() function to the following and watched the magic happen.

public function render()
{
return view(‘backend.livewire.search.search’)
->extends(‘backend.base’)
->section(‘content’);
}

Thanks for the help! :slight_smile:

1 Like