Laravel Livewire 请求中未发送更改的数据

Question

我正在尝试学习 Laravel Livewire，我有一个 bootstrap 模式的表单，我正在尝试通过 Livewire 进行更新。我只是在验证步骤之后添加数据，甚至没有注册我正在发送数据的任何更改。当我查看网络请求时，它是一样的。这就像除了表单中已经填充的内容之外没有表单数据被发送。我查看了文档，但我无法弄清楚我做错了什么。这应该是 Livewire 中最简单的事情，但它不起作用。

这是我的组件：

class LocationInfo extends Component
{

    public $states;
    public Location $location;

    protected $rules = [
        'location.name'          => ['required', 'string', 'max:150'],
        'location.client_id'     => ['required', 'integer', 'exists:clients,id'],
        'location.email'         => ['required', 'string', 'email', 'max:255'],
        'location.phone'         => 'required|string|min:12|max:12|regex:/^\d{3}\-\d{3}\-\d{4}$/|',
        'location.address'       => ['required', 'string', 'max:150'],
        'location.city'          => ['required', 'string', 'max:150'],
        'location.state'         => ['required', 'string', 'max:2'],
        'location.zip_code'      => ['required', 'string', 'max:5'],
        'location.website_url'   => ['required', 'url'],
    ];

    public function mount($location)
    {
        $this->location = $location;
        $this->states = USState::all();
    }


    public function render()
    {
        return view('livewire.location-info');
    }

    public function save()
    {

        $validatedData = $this->validate();
        dd($validatedData);
        $this->location->save($validatedData);

    }
}

这是我的表格（为简洁起见进行了简化）：

<div class="modal fade" id="location_info_modal" tabindex="-1" aria-labelledby="location_info_modal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form wire:submit.prevent="save" id="location_info_form">  {{-- class=""  action="/locations/{{ $location->id }}"> --}}
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between">
                    <div id="modal_header" class="d-flex justify-content-start align-items-center">
                        <h5 class="modal-title pe-3">Edit Location Info</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="btn-close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        @csrf
                        <div class="mb-3 col-md-8">
                            <label for="location.name" class="form-label">Location Name</label>
                            <input wire:model="location.name" type="text" class="form-control" id="name" placeholder="name" name="name" data-inputmask-regex="[A-Za-z0-9#.,''-() &]+">
                            @error('location.name') <span class="error">{{ $message }}</span> @enderror
                        </div>    
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary save_btn" id="location_info_save">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

这里是我调用组件的地方：

<livewire:location-info :location="$location"/>

请帮助我了解这里发生了什么。我试过删除属性声明中的 Location 类型提示，但这并没有改变任何东西。

dd() 中显示的数据实际上是我的模型记录，没有任何更改。它还反映了当前甚至不在表单中的所有其他模型字段，所以有些地方不对。

我试过将 Request $request 作为参数添加到 save() 方法签名，然后将值转储到那里，它也只是模型值，而不是表单提交。

这是 bootstrap 的事情吗？我假设我正在使用 bootstrap 并且在这种情况下是 bootstrap 模态，这对 Livewire 没有影响，但我不知道为什么这不起作用.

Answer 1

您没有正确设置$rules？尝试从 location.name 更新为 location_name，然后确保它们与输入的名称属性相匹配。目前您输入的 name="name" 不正确。

应该是这样的吧？？

public $location_name;
public $location_client_name;
public $location_email;
public $location_phone;
public $location_address;
public $location_city;
public $location_state;
public $location_zip_code;
public $location_website_url

public $states;
public Location $location;

protected $rules = [
    'location_name'          => ['required', 'string', 'max:150'],
    'location_client_id'     => ['required', 'integer', 'exists:clients,id'],
    'location_email'         => ['required', 'string', 'email', 'max:255'],
    'location_phone'         => 'required|string|min:12|max:12|regex:/^\d{3}\-\d{3}\-\d{4}$/|',
    'location_address'       => ['required', 'string', 'max:150'],
    'location_city'          => ['required', 'string', 'max:150'],
    'location_state'         => ['required', 'string', 'max:2'],
    'location_zip_code'      => ['required', 'string', 'max:5'],
    'location_website_url'   => ['required', 'url'],
];

public function mount($location)
{
    $this->location = $location;
    $this->states = USState::all();
}


public function render()
{
    return view('livewire.location-info');
}

public function save()
{

    $validatedData = $this->validate();
    dd($validatedData);
    $this->location->save($validatedData);

}

}

然后视图更新输入为：等...

<label for="location_name" class="form-label">Location Name</label>
<input wire:model="location_name" type="text" class="form-control" id="location_name" placeholder="name" name="location_name" data-inputmask-regex="[A-Za-z0-9#.,''-() &]+">
@error('location_name') <span class="error">{{ $message }}</span> @enderror

Answer 2

您需要将 wire:click="save" 添加到您的提交按钮。

<button wire:click="save" type="submit" class="btn btn-primary save_btn" id="location_info_save">Save</button>

Answer 3

在基本上尝试了我能想到的所有方法之后，我终于尝试删除我在输入字段上使用的掩码，这显然引起了一些冲突，因为一旦我删除它，它就可以正常工作。显然 Livewire 不能很好地与 javascript 库一起使用。

从我的输入字段中删除它后，它起作用了：

data-inputmask-regex="[A-Za-z0-9#.,''-() &]+"

Laravel Livewire 请求中未发送更改的数据

Laravel Livewire no changed data sent in request

laravel

laravel-livewire

laravel-8