Laravel 8 Livewire集成Google Places自动完成功能失效问题

问题核心在于你同时给输入框绑定了wire:model，又给父容器加了wire:ignore——Livewire依然会通过wire:model跟踪该字段的后端状态，当组件因其他输入框交互重新渲染时，会把后端保存的原始输入值（比如你输入的"56"）同步回输入框，覆盖Google Places自动填充的内容。

解决步骤 #

• 移除输入框上的wire:model，避免Livewire自动绑定字段引发冲突
• 通过JavaScript监听Google Places的地址选择事件，手动将选中的地址同步到Livewire组件属性
• 保留父容器的wire:ignore，防止Livewire重新渲染该输入框

修改后的HTML代码 #

<div wire:ignore id="for-input-address" class="form-group col-lg-6{{ $errors->has('address') ? ' has-danger' : '' }}">
    <label class="form-control-label" for="input-address">{{ __('Home address') }}</label>
    <input type="text" name="address" id="input-address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Home address') }}" value="{{ old('address') }}" required autofocus>

    @if ($errors->has('address'))
        <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('address') }}</strong>
        </span>
    @endif
</div>

配套JavaScript代码 #

document.addEventListener('livewire:init', function () {
    const input = document.getElementById('input-address');
    const autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.addListener('place_changed', function () {
        const place = autocomplete.getPlace();
        const fullAddress = place.formatted_address;
        
        // 更新输入框显示值
        input.value = fullAddress;
        // 手动同步到Livewire的address属性
        @this.set('address', fullAddress);
    });
});

这样处理后，当你选择自动完成的地址时，值会同时更新输入框和Livewire后端属性，切换字段时就不会出现重置问题，同时表单验证也能正常基于address属性工作。

内容的提问来源于stack exchange，提问作者Fabian Milu