CODEWITHSUNDEEP
laravellaravel-livewire
Evans
Evans

Reputation: 45

Livewire component events not firing

I installed livewire in my laravel project and created components, I add the components to the main file and they are displayed successfully. The problem comes when I attempt to use data binding and firing events which have completely failed to work. What could be the problem?

This is my main file.

<!DOCTYPE html>
<html>
<head>
  <title>Admin</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSRF Token -->
  <meta name="_token" content="{{ csrf_token() }}">

  <link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">

  <!-- plugin css -->
  <link href="{{ asset('assets/fonts/feather-font/css/iconfont.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/flag-icon-css/css/flag-icon.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
  <!-- end plugin css -->

  @stack('plugin-styles')

  <!-- common css -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
  <!-- end common css -->

  @stack('style')

  <!-- Livewire styles -->
  @livewireStyles

</head>
<body data-base-url="{{url('/')}}">

  <script src="{{ asset('assets/js/spinner.js') }}"></script>

  <div class="main-wrapper" id="app">
    @include('layout.sidebar')
    <div class="page-wrapper">
      @include('layout.header')
      <div class="page-content">
        @yield('content')
      </div>
      @include('layout.footer')
    </div>
  </div>

    <!-- base js -->
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('assets/plugins/feather-icons/feather.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
    <!-- end base js -->

    <!-- plugin js -->
    @stack('plugin-scripts')
    <!-- end plugin js -->

    <!-- common js -->
    <script src="{{ asset('assets/js/template.js') }}"></script>
    <!-- end common js -->

    <!-- Livewire scripts -->
    @livewireScripts

    @stack('custom-scripts')
</body>
</html>

User.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class User extends Component
{

    public $counter = 0;

    public function mount(){
        $this->counter++;
    }

    public function render()
    {
        return view('livewire.user')->extends('layout.master');
    }

    public function increment(){
        $this->counter++;
    }
}

User component

<div>

    @section('content')

    {{$counter}}
    <input type="number" wire:model="counter">     

    @endsection

</div>

Routes file

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [App\Http\Livewire\User::class, '__invoke']);

Upvotes: 0

Views: 1831

Answers (2)

Peppermintology
Peppermintology

Reputation: 10210

You don't need to use @section() inside of your component blade file, try removing them:

<div>

    {{ $counter }}
    <input type="number" wire:model="counter" />

</div>

Livewire knows you're extending a blade file and will render in a default slot.

You can read more about how to configure rendering of full page components in the docs.

Upvotes: 2

sherifcoder
sherifcoder

Reputation: 169

first of all do not increment your counter in mount() , mount is called once so why do you need to do that ? and you are not calling any action on your component so i created a button to increment it .

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class User extends Component
{

    public $counter;

    public function mount(){
        $this->counter = 0;
    }

    public function render()
    {
        return view('livewire.user')->extends('layout.master');
    }

    public function increment(){
        $this->counter++;
    }
}


your component 

<div>

    @section('content')

    {{$counter}}
    <input type="number" wire:model="counter">     
     <button wire:click="increment()"> add </button>
    @endsection

</div>

Upvotes: 0

Related Questions