Livewire 提交表单在数据库中创建重复记录答案

【问题标题】：Livewire submit form creates duplicate records in databaseLivewire 提交表单在数据库中创建重复记录
【发布时间】：2021-06-22 05:15:31
【问题描述】：

我有一个模态表单并且我正在使用 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()));
        }
    }

【问题讨论】：

jQuery 将无法工作。
会不会是每次 Livewire 刷新时都会触发您的 DOM 加载事件？因为这意味着您要重新绑定提交功能，因此每次提交时多提交一次。尝试console.log('loaded') 并检查控制台以查看事件是否多次触发。

标签： php laravel forms laravel-livewire

【解决方案1】：

如果您使用livewire，则无需像在此处那样在Javascript 中绑定事件。

因为如果您这样做，请求会触发两次。您也可以在网络中检查相同的内容。

【讨论】：