John Davidson

Message:

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

---

My Answer:
It looks like you may be missing the Livewire script in your layout file. Make sure to include the Livewire script in your layout file like this:

html







@livewireStyles


@yield('content')

@livewireScripts




Also, make sure that you have properly installed Livewire in your Laravel project by running `composer require livewire/livewire`.

If you are still facing issues, try clearing your cache by running `php artisan cache:clear` and `php artisan view:clear`.

If the issue persists, you can try reaching out to the tutorial creator or the Livewire community for further assistance.