كيف يمكن تقديم استمارة form دون تحديث الصفحة باستعمال livewire في لارافيل؟

يمكنك استعمال الحدث submit عن طريق الموجه wire:submit لخدمة هذا الغرض، 

لنقم أولا بإنشاء مكون livewire يمثل النموذج الخاص بنا عن طريق: 

php artisan make:livewire mySimpleForm

وليحمل ملف العرض المرافق لهذا المكون الهيكلة التالية: 

<div> 
  <h2> {{ $num }} </h2>
  <from wire:submit.prevent="handleData">
    <input type="number" name="number1" wire:model="number1"/>
    <input type="number" name="number2" wire:model="number2"/>
    
    <button type="submit"> حفظ </button>
  </form>
</div>

• لاحظ استقبال المتغير num الذي سيتم تكوينه عن طريق صنف المكون MySimpleForm.php 
• لاحظ ايضا استعمال الحدث submit.prevent لمنع تقديم النموذج بشكل افتراضي (لمنع تحديث الصفحة عند تقديمه)
• لاحظ أيضا استعمال الحدث model للاستماع لكل من قيم number1 و number2
• لاحظ استعمال التابع handleData الذي يمثل تابع صنف المكون MySimpleForm الذي سيقوم بالتعامل مع البيانات التي نرسلها. 

يكون ملف صنف المكون MySimpleForm كالتالي:

<?php 


namespace App\Http\Livewire;

use Livewire\Component;

class MySimpleForm extends Component{

   
     public $number1;
     public $number2;
     public $num = 0;

     public funciotn handleData()
     {
         $this->num = $this->number1 + $this->number2;
     }

     public function render()
     {
          return view('livewire.my-simple-form');
     }
 
}

الذي سيحصل هنا هو: عندما نملئ النموذج ونقدمه سيتم استهداف التابع handleData للصنف MySimpleForm عن طريق livewire ويتم تبديل قيمة num. (ستلاحظ تبديل قيمة num في ملف العرض كإثبات على تقديم النموذج وذلك دون الحاجة الى اعادة تحديث الصفحة). 

بالطبع فإنه يمكنك التعامل مع هاته البيانات وفق أي طريقة تريدها، أو تضمين هذا المكون بأي مكان أو صفحة أخرى.