如何實時更新wire:model的值

我有一個看起來像這樣的表格：

當用戶在約會開始時間輸入一個值時，我想將該值增加 30 分鐘并在約會結束時間顯示它。這是我的控制器

//get data from db 
public function userId($appointmentId){
        $appointmentInfo = Appointments::with('user')->where('id',$appointmentId)->first();
        
        $this->userAppointmentName = $appointmentInfo->user->name;
        $this->description = $appointmentInfo->description;
        $this->subject = $appointmentInfo->subject;
        $this->chooseDate = Carbon::parse($appointmentInfo->start_appointment)->toDateString(); 
        $this->start_appointment = Carbon::parse($appointmentInfo->start_appointment)->format('H:i'); 
        $this->end_appointment = Carbon::parse($appointmentInfo->start_appointment)->addMinutes(30)->format('H:i');  
    }

public function addApointment($appointmentId){
        
        $this->start_appointment = Carbon::parse(strtotime("$this->chooseDate $this->start_appointment"))->format("Y-m-d H:i:s");
        
        $this->end_appointment = Carbon::parse(strtotime("$this->chooseDate $this->start_appointment"))->addMinutes(30)->format("Y-m-d H:i:s");
        
        $record = Appointments::where([
            ['id',$appointmentId],
            ['business_id',auth()->id()]])->first();

        $record->update([
                'status' => 'in_progress',
                'subject' => $this->subject,
                'description' => $this->description,
                'start_appointment' => $this->start_appointment, 
                'end_appointment' => $this->end_appointment, 
            ]);
    }

這是在我的刀片檔案中

<div class="grid md:grid-cols-2 gap-x-2">
                <div class="mb-4">
                    <label class="block mb-1"> Appointment Start Time </label>
                    <div class="relative">
                        <div class="flex items-center justify-center">
                            <div class="datepicker relative form-floating mb-3 xl:w-96">
                                <input wire:model = "start_appointment" type="time" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Select a date" />
                                <label for="floatingInput" class="text-gray-700">Select a time ex:12:30PM</label>
                                @if($errors->has("start_appointment"))<p style="color:red">{{ $errors->first("start_appointment") }}</p>@endif                      
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="mb-4">
                    <label class="block mb-1"> Appointment End Time </label>
                    <div class="relative">
                        <div class="flex items-center justify-center">
                            <div class="datepicker relative form-floating mb-3 xl:w-96">
                                <input wire:model.lazy = "end_appointment" type="time" disabled class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Select a date ex:1:30PM" />
                                <label for="floatingInput" class="text-gray-700"></label>
                                @if($errors->has("end_appointment"))<p style="color:red">{{ $errors->first("end_appointment") }}</p>@endif                      
                            </div>
                        </div>
                    </div>
                </div> 
            </div>

uj5u.com熱心網友回復：

您可以使用wire:change屬性來監聽 的變化start_appointment，如下所示：

<input wire:model="start_appointment" wire:change="startAppointmentChanged" ... />

在你的 Livewire 組件中有類似的東西：

public function startAppointmentChanged() 
{
   $this->end_appointment = Carbon::parse($this->start_appointment)->addMinutes(30)->format('H:i');  
}

隨時保持$end_appointment同步$start_appointment變化。

標籤：拉拉维尔laravel-livewire

上一篇：表格，表單（單選框，復選框，下拉選單）

下一篇：瀏覽器本地存盤