javascript Laravel 9 Livewire.发射未击发事件

yrdbyhpb  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(99)

这是我在SO的第一个问题，我正在使用laravel 9与livewire 2. x和php 8. 1我想从刀片中的文本字段获取数据，并通过按钮点击将其传递给livewire组件，然后组件将对该数据进行一些雄辩的查询，然后再次按钮点击我想从组件加载数据到livewire刀片视图，我正在使用Javascript emit函数来参考这个livewire docs.（https://laravel-livewire.com/docs/2.x/events）。但是它不工作
我很抱歉，如果我的代码是可怕的，但我是一个新的学习者，请指导我或张贴替代这一点，如果需要任何其他细节，请让我知道
总之，我想实现双向沟通

  • 〉将数据从刀片视图传递到Livewire组件-〉从组件检索数据并显示在刀片视图上
    下面是代码

客户清单.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组件结束
客户清单刀片式服务器（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 -->
JavaScript

1条答案

按热度按时间
np8igboo

np8igboo1#

你总是欢迎哈姆扎，Livewire有内置的双向通信的属性，Properties。
在以下代码中，我们使用wire:model="message"指令将刀片输入绑定到livewire组件中的message属性

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

属性绑定及其行为有一些重要的livewire功能
默认情况下，Livewire对文本输入应用150ms的去抖动。这可以避免用户在文本字段中输入时发送太多的网络请求。
如果你想覆盖这个默认设置（或者将其添加到非文本输入），Livewire提供了一个"去抖动"修改器。如果你想对输入应用半秒去抖动，你可以包括这样的修改器：<input type="text" wire:model.debounce.500ms="message">
此输入字段中的输入数据在livewire组件的$message属性中可用，您可以按以下方式定义该属性

class HelloWorld extends Component
{
    public $message;
}

在您的情况下，您需要livewire延迟更新，这将阻止实时数据更新，然后您可以通过第二个指令请求（将是提交按钮）访问输入数据，

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

祝好运🤞

赞(0）分享  回复(0）举报  2023-01-11
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com