Livewire 组件事件未触发

Question

我在我的 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>

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++;
    }
}

用户组件

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

Answer 1

首先不要在 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>

Answer 2

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

<div>

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

</div>

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

您可以在文档中阅读有关如何配置 full page components 渲染的更多信息。

Livewire 组件事件未触发

Livewire component events not firing

laravel

laravel-livewire