Laravel Livewire events (e.g. click) not working. I'm using laravel 7

Question

I recently started studying Laravel Livewire. When I first created a Livewire component, everything worked out fine. But when I tried creating a new one, the event and functions does not work anymore. The property/variable from the Livewire class can be read, but I really can't get the functions to work. Here is my code

resources/views/livewire/step.blade.php

<div>
    <button id="sampleBtn" wire:click="increment">&plus;</button>
    {{-- Doesn't change value. Still zero --}}
    <h3> {{$steps}} </h3> 
</div>

app\http\Livewire\Step.php

<?php

namespace App\Http\Livewire;
   
use Livewire\Component;
    
class Step extends Component
{
    public int $steps = 0;
        
    public function increment()
    {
        $this->steps++;
    }

    public function render()
    {
        return view('livewire.step');
    }
}

resources/views/todos

@extends('layouts.app')
@section('content')
<div class="container">
  <a href="/todo" class="btn btn-info">&larr;</a>
  <div class="col-6 offset-3 my-3">
    <div class="card mx-auto my-3">
      <div class="card-header">
        <h4 class="card-title">Create</h4>
      </div>
      <div class="card-body">
        <x-alert/>
        <form action="{{route('todo.store')}}" method="post" class="form">
          @csrf
          <div class="form-group">
            <input type="text" name="title" id="title" class="form-control" placeholder="Title">
          </div>
          <div class="form-group">
            <textarea name="description" id="description" cols="30" rows="5" class="form-control" placeholder="description"></textarea>
          </div>
          <div class="form-group">
            <input type="text" name="step" class="form-control" placeholder="add step here">
          </div>
          <button type="submit" id="createBtn" class="btn btn-block btn-primary">Add task</button>
        </form>
        {{-- I placed this outside the form because it undergoes through validation. I don't want it to be validated yet. --}}
        <div id="forLivewire">
          @livewire('step')
        </div>   
      </div>
    </div>
  </div>
</div>
@endsection

I tried putting the livewire script on the HTML head along with other scripts. It still does not work. Also, I'm using bootstrap.

P.s. I'm currently following a tutorial on YouTube.

edit: I'm getting a "err_aborted 404" error on the console

Yes. I'm getting a "net::ERR_ABORTED 404" and an "uncaught reference error: Livewire is not defined". I think I have a problem on my Livewire script. — it's-me-julia

it's-me-julia it's-me-julia · Accepted Answer · 2020-11-28T11:51:35

The problem was in the Livewire scripts. I published the assets and now it works!

php artisan vendor:publish --force --tag=livewire:assets

Laravel Livewire events (e.g. click) not working. I'm using laravel 7

1 Answers