Laravel 9 Livewire.emit 未觸發事件

Question

這是我在 SO 的第一個問題，我正在使用 laravel 9 和 livewire 2.x 和 php 8.1 我想從刀片中的文本字段獲取數據並在單擊按鈕時將其傳遞給 livewire 組件，然后組件將執行一些 eloquent 查詢該數據然后再次單擊按鈕我想將數據從組件加載到實時線刀片視圖，我正在使用 Javascript emit function 參考此 livewire 文檔。 （ https://laravel-livewire.com/docs/2.x/events ）。 但它不起作用

如果我的代碼很糟糕，我很抱歉，但我是新手，請指導我或為此發布替代方案，如果需要任何其他詳細信息，請告訴我

總之我想實現雙向通信

-> 將數據從刀片視圖傳遞到 Livewire 組件 -> 從組件檢索數據並顯示在刀片視圖上

下面是代碼

CustomerManifest.php（Livewire 組件）

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\ReceptionModel;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class CustomerManifest extends Component
{
    //Input fetched from Form
    public $data_received;
    public $name_input;
    public $email_input;
    public $booking_from,$booking_to,$time_from,$time_to;

    public $customer_weight;
    public $available_balance;

    //Data for checking available staff

    public $pilot,$tandem,$videographer,$amount;

    public $available_pilots;

    //Listeners for input from blade
    protected $listeners = ['jsRetreiveData' => 'retreiveData' ];

    //Listener Function
    public function retreiveData($data)
    {
        $this->data_received = $data;

        print_r($this->data_received);
    }

    public function viewData()
    {
        $this->pilot = DB::table('receptions')
        ->select('first_name')
        ->where('category', 'pilot')
        ->get();

        foreach($this->pilot as $data)
        {
          $name_input[] = $data->first_name;
        }

        for($x=0; $x < count($name_input); $x++)
        {
            $this->available_pilots = $name_input[$x];
        }
        
    }

    public function render()
    {
        $this->viewData();
        return view('livewire.customer-manifest');
    }

    
}

Livewire 組件結束

CustomerManifest.blade（Livewire 視圖）

<div>
<title>Manifest Screen</title>
<div class="alert alert-info mt-2" role="info">
    Here you can assign pilot and other staff to customer.
</div>

<div class="d-flex flex-row">   <!-- Start of Customer Details Div -->
  
       <form  class="form">
           <div class="container">   <!-- Start Grid -->
            
            <div class="row">   <!-- Start name & email row -->
                
                <div class="col-4">
            
                    <label for="customer_name">Customer Name</label>
                    <input class="form-control" id="customer_name" name="customer_name" type="text">
                    
                </div>
            
                <div class="col-4">
                    
                    <label for="customer_email">Customer Email</label>
                    <input class="form-control" id="email" name="email" type="email">
                    
                </div>

                <div class="col-4"  style="margin-top: 25px">
                    
                    <!-- Fetch from DB Button -->   
                    <button  class="m-2 btn btn-outline-info" type="submit" onClick=loadData() >Fetch Details</button>

                </div>

               
            </div> <!-- End of name & email row -->

            <div class="row">   <!-- Start Date & Time row -->
                
                <div class="col-sm">
        
                    <label for="ex3">Booking From</label></br>
                    <input wire:model='booking_from' class="form-control-date" id="booking_from" name="booking_from" type="date">
                    
                </div>
                
                <div class="col-sm">
                    
                    <label for="ex3">Booking To</label></br>
                    <input wire:model='booking_to' class="form-control-date" id="booking_to" name="booking_to" type="date">
                    
                </div>
            
                <div class="col-sm">
                    
                    <label for="ex3">Time From</label></br>
                    <input wire:model='time_from' class="form-control-date" id="time_from" name="time_from" type="time">
                    
                </div>
                
                <div class="col-sm">
                    
                    <label for="ex3">Time To</label></br>
                    <input wire:model='time_to' class="form-control-date" id="time_to" name="time_to" type="time">
                    
                </div>

               
            </div> <!-- End of Date & Time row -->

           </div> <!-- End of grid -->

       </form>
    
    
   
</div>  <!-- End of Customer Details Div -->
    

<!-- Start available pilots  -->
    <div class="d-flex flex-column" style="margin-top: 50px; margin-left: 10px">
       <form wire:submit.prevent="addManifest" class="mt-4" method="POST">
        @csrf

        @method('POST')
       
            <select class="form-select fmxw-200 mx-2" name="available_pilots">
                <option selected>Pilots</option>
                <option id="option1" value="{{ $this->available_pilots }}">{{  $this->available_pilots }}</option>
            </select>
       
            <select class="form-select fmxw-200 mx-2">
                <option selected>Jump Type</option>
                <option id="option2" value="1"></option>
            </select>        
         
            <select class="form-select fmxw-200 mx-2" name="available_pilots">
                <option selected>Instructors</option>
                <option id="option3" value="1"></option>
            </select>
        
        
           <select class="form-select fmxw-200 mx-2" name="available_pilots">
                <option selected>Videographers</option>
                <option id="option4" value=""></option>
            </select>
        

       </form>
        <!-- Book Button -->   
    <button style="max-width: 150px" class="m-2 btn btn-outline-success" type="submit">Add to Manifest</button>

    </div> <!-- End of Div -->

     

    <div class="d-flex flex-row" style="margin-top: 70px">   <!-- Start Booking Div -->
         
            <div class="container">   <!-- Start Grid -->
             
             <div class="row">   <!-- Start row -->
                          
            <div class="col-4">
                <h1 class="display-5">Pilot Name:</h1>
                <p class="text-info mx-2 display-5">Load from DB</p></br> 
            </div>

            <div class="col-4">
                <h1 class="display-5">Videographer Name:</h1>
                <p class="text-info mx-2 display-5">Load from DB</p></br> 
            </div>

            <div class="col-4">
                <h1 class="display-5">Tandem Name:</h1>
                <p class="text-info mx-2 display-5">Load from DB</p></br> 
            </div>
                
             </div> <!-- End of row -->

             <div class="row">   <!-- Start row -->
                          
                <div class="col-4">
                    <h1 class="display-5">Jump Type:</h1>
                    <p class="text-info mx-2 display-5">Load from DB</p></br> 
                </div>
    
                <div class="col-4">
                    <h1 class="display-5">Amount Paid:</h1>
                    <p class="text-info mx-2 display-5">Load from DB</p></br> 
                </div>
    
                <div class="col-4">     
                    <button class="m-2 btn btn-info" type="button">Print Receipt</button>
                </div>
                    
                 </div> <!-- End of row 2-->         
            
            </div> <!-- End of grid -->
    
 </div>  <!-- End of Booking Div -->
 <script>
    
    function loadData()
    {
        let name = document.getElementById('customer_name').value;
        let email = document.getElementById('email').value;
        let booking_from = document.getElementById('booking_from').value;
        let booking_to = document.getElementById('booking_to').value;
        let time_from = document.getElementById('time_from').value;
        let time_to = document.getElementById('time_to').value;

        var data = new Array ("Name: "+name,
        "Email: "+email,
        "Booking From: "+booking_from,
        "Booking To: "+booking_to,
        "Time From: "+time_from,
        "Time To: "+time_to);
        

        window.livewire.emit('jsRetreiveData', data);

    }

        
        
    

</script>
</div><!-- End of Parent Div -->

Answer 1

永遠歡迎你 Hamza，Livewire 在屬性Properties中內置了雙向通信。

在下面的代碼中，我們使用wire:model="message"指令將刀片輸入綁定到 livewire 組件中的 message 屬性

<input wire:model="message" type="text">

屬性綁定及其行為有一些重要的 livewire 特性

默認情況下，Livewire 對文本輸入應用 150 毫秒的去抖動。 這避免了當用戶在文本字段中鍵入時發送過多的網絡請求。

如果您希望覆蓋此默認值（或將其添加到非文本輸入），Livewire 提供了一個“去抖動”修改器。 如果你想對輸入應用半秒的去抖動，你可以像這樣包含修飾符： <input type="text" wire:model.debounce.500ms="message">

此輸入字段中的輸入數據在 livewire 組件的$message屬性中可用，您可以按如下方式定義該屬性

class HelloWorld extends Component
{
    public $message;
}

在你的情況下，你需要 livewire Deferred Updating ，這可以防止實時數據更新然后你可以通過第二個指令請求訪問輸入數據，這將是提交按鈕，

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

祝你好運

Answer 2

面臨同樣的問題，知道為什么 xhr 請求沒有被 livewireJS 觸發。

laravel JavaScript Livewire