Форма отправки Livewire создает дубликаты записей в базе данных

#php #laravel #forms #laravel-livewire

Вопрос:

У меня есть форма в модальном режиме, и я использую Livewire, на самом деле происходит то, что когда я отправляю форму, все работает правильно, но она просто создает дубликаты записей! В первый раз создается 2 дубликата, во второй раз создается 3 и еще и еще. Я не знаю, как это исправить! Я был бы признателен вам за помощь.

это мой файл просмотра livewire :

     <div class="modal fade" id="createProfessionModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <!--begin::Container-->
                <div class="card card-custom card-shadowless rounded-top-0">
                    <!--begin::Body-->
                    <div class="card-body p-0">
                        <div class="row justify-content-center py-8">
                            <!--begin::Wizard Form-->
                            <form class="form fv-plugins-bootstrap fv-plugins-framework" id="createProfessionForm" method="post" wire:submit.prevent="store">
                                <div class="justify-content-center">
                                    <!--begin::Wizard-->
                                    <div class="my-5 step">
                                        <h5 class="text-dark font-weight-bold mb-10">ایحاد حرفه جدید</h5>
                                        <!--begin::Group-->
                                        <div class="form-group row fv-plugins-icon-container">
                                            <label class="col-form-label" for="profession_title">عنوان حرفه</label>
                                            <div class="col-lg-9 col-xl-9">
                                                <input id="profession_title" class="form-control form-control-solid form-control-lg" wire:model.defer="title" name="title" type="text">
                                                <div class="fv-plugins-message-container"></div>
                                            </div>
                                        </div>
                                        <!--end::Group-->
                                        <button type="submit" class="btn btn-primary font-weight-bolder px-9 py-4" >ایجاد</button>
                                        <button type="button" data-dismiss="modal" class="btn btn-outline-info font-weight-bolder px-9 py-4" >بستن</button>
                                    </div>
                                    <!--end::Wizard-->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--end::Wizard Form-->
            </div>
        </div>
    </div>

 

скрипт:

 document.addEventListener('DOMContentLoaded', function () {
  $('#createProfessionForm').on('submit', function (e) {
      e.preventDefault();

      let professionValue = $('#profession_title').val();

      @this.set('title', professionValue, true);
      @this.store();
  })
})
 

это мой компонент

     public string $title;

    public function store()
    {
        try {
            $profession = new Profession();
            $profession->name = $this->title;
            $profession->save();
            session()->flash('success', 'عملیات با موفقیت انجام شد.');
        } catch (Exception $exception) {
            session()->flash('error', __($exception->getMessage()));
        }
    }
 

Комментарии:

1. Тогда jQuery не будет работать.

2. Может ли быть так, что ваше загруженное событие DOM запускается каждый раз при обновлении Livewire? Потому что это означало бы, что вы повторно привязываете функцию отправки, поэтому отправляете еще один раз при каждой отправке. Попробуйте console.log('loaded') проверить консоль, чтобы убедиться, что событие срабатывает несколько раз.

Ответ №1:

Если вы используете livewire, вам не нужно привязывать событие в Javascript, как вы делаете здесь. ваш сценарий

Потому что, если вы это сделаете, запрос будет выполнен дважды. Вы также можете проверить то же самое в сети.