Livewire - Increased time each time doing request

Question

Every time I do the same action request, the runtime keeps increasing. Is there any way to fix it?

in my blade :

<div class="col-md-6">
    <div class="form-group @error('promotion') has-error @enderror required">
        <label>Promotion</label>
        <select class="full-width" wire:model="promotion" wire:change="select_promotion">
            <option></option>
            @foreach($data_promotion as $data)
            <option value="{{$data->promotion_id}}" {{$promotion==$data->promotion_id?'selected':''}}>{{$data->promotion_name}}</option>
            @endforeach
        </select>
        <x-jet-hold wire:loading.class="visible"></x-jet-hold>
        <x-jet-loading wire:loading.class="visible" wire:target="select_group"></x-jet-loading>
    </div>
    @error('promotion')
        <label id="promotion-error" class="error" for="promotion">{{ $message }}</label>
    @enderror
</div>

my method :

public function select_promotion()
{
        $this->type_proposal_tap = 'normal';
        $this->modal = 0;
        $this->source_budget = 1;
        $promotion = PromotionNames::select('mst_promotion.*','mst_promotion_form.form_field','mst_promotion_form.form_upload')
                                    ->where(['mst_promotion.promotion_id'=>$this->promotion])
                                    ->join('mst_promotion_form','mst_promotion_form.form_id','mst_promotion.form_id')->first();

       ----other code----
}

Doing the same thing, i.e. selecting select option and calling select_promotion() method, livewire time request keep increasing like this :

After searching for a long time, I noticed that the method call performed an unusual execution, so it looks like the same data query is being executed like this:

How to stop it? even i don't have process in method mount() or render()

Answer 1

you don't need to use both wire directive (model and change) in select element. If you use the property for bind to backend you can get the lifecycle hook of it like

<div class="col-md-6">
  <div class="form-group @error('promotion') has-error @enderror required">
    <label>Promotion</label>
      <select class="full-width" wire:model="promotion">
        <option></option>
        @foreach($data_promotion as $data)
         <option value="{{$data->promotion_id}}">{{$data->promotion_name}}</option>
        @endforeach
        </select>
   //............     
</div>

public function updatedPromotion($value)
{
   dd($value);
   $this->select_promotion();
}

if you attempt to use the change action you can do this

<select class="full-width" wire:change="$emit('select_promotion', $event.target.value)">
        <option></option>
//.......

protected $listeners = [
   'select_promotion'
];

public function select_promotion($value)
{
   $this->promotion = $value;
   //..... the rest of this method
}