Laravel 8 Livewire和谷歌的地方自动完成不工作

9njqaruj  于 2023-03-19  发布在  其他
关注(0)|答案(3)|浏览(99)

sI我有一个livewire表单,它的地址字段启用了google places autocomplete,每次我从autocomplete列表中选择一个地址并移动到表单中的一个新输入,地址输入都会被重置为点击我想要的地址之前的值。
我在我的字段中添加了wire:ignore,它仍然会被重置为在click事件之前输入的值。

<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 wire:model="address" 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>

因此,如果我键入56并在移动到下一个字段时选择地址,输入将重置为56。
我想说的是,我有一些使用wire的选择字段:当livewire重新加载DOM时,忽略这些字段就可以了。

oogrdqng

oogrdqng1#

input-〉autocomplete="off"中添加一个属性,告诉浏览器不要使用任何自动完成机制。
参见:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

qvk1mo1f

qvk1mo1f2#

我最终使用livewire事件,记录在这里:https://laravel-livewire.com/docs/2.x/events在我的blade文件中,我在google自动完成“place_changed”上触发了一个事件,如下所示

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    Livewire.emit('addressUpdated', addressAndTown, postcode);
});

在我的控制器中,我在提交函数之前做了以下操作

public function addressUpdated($address, $postcode)
{
    $this->address = $address;
    $this->postcode = $postcode;
}

并更新了控制器中的值

pw9qyyiw

pw9qyyiw3#

基本上,您可以手动地将更改的数据“wire:model”到所需的公共变量。例如:

google.maps.event.addListener(autocomplete, 'place_changed', function(d) {
    var place = autocomplete.getPlace();
    @this.place_id = place.place_id;
});

}

相关问题