Livewire 组件事件未触发答案

【问题标题】：Livewire component events not firingLivewire 组件事件未触发
【发布时间】：2021-08-19 11:49:12
【问题描述】：

我在我的 laravel 项目中安装了 livewire 并创建了组件，我将组件添加到主文件并成功显示。当我尝试使用完全无法工作的数据绑定和触发事件时，问题就出现了。可能是什么问题？

这是我的主文件。

<!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>

用户.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++;
    }
}

用户组件

<div>

    @section('content')

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

    @endsection

</div>

路由文件

<?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']);

【问题讨论】：

没有触发的事件在哪里？
我已经删除了事件的按钮，但是数据绑定没有正常工作。

标签： laravel laravel-livewire

【解决方案1】：

您不需要在组件刀片文件中使用@section()，请尝试删除它们：

<div>

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

</div>

Livewire 知道您正在扩展刀片文件，并将在默认插槽中呈现。

您可以在文档中详细了解如何配置 full page components 的呈现。

【讨论】：

现在它在删除 @section() 指令后工作。谢谢你的回答。

【解决方案2】：

首先不要在 mount() 中增加你的计数器， mount 被调用一次，那么你为什么需要这样做呢？而且你没有对你的组件调用任何操作，所以我创建了一个按钮来增加它。

<?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>

【讨论】：

我已经尝试过该代码，但它无法工作@sherifcoder。