【发布时间】：2021-03-20 12:08:10
【问题描述】：
我希望有人可以帮助我解决一个我在进行大量研究和实施不同代码之后一直在努力解决的问题，但似乎没有任何效果。
我正在使用 Livewire 多步骤预订表格：https://www.positronx.io/laravel-livewire-wizard-form-tutorial-with-example/
在第一步中，前两个输入字段是取货地点和还车地点。 （仅限意大利地区）
当我删除 Livewire 脚本时，带有完整地址的 Google Map Autocomplete 会用所需的值填充输入字段，但随后 表单无法进入第 2 步 .
当我添加 Livewire 脚本时，表单会起作用，但取件地点和送件地点会清除自动完成地址和仅提交在自动建议给出完整地址之前输入的内容。
我已添加 dd($validatedData);在 Wizard.php 中查看进行步骤 2 时会发生什么。
对于解决上述问题的任何支持或建议，我将不胜感激。
实时测试 URL：https://teqcube.com/stackoverflow
下载带有注释代码的 Views 文件（试错功能）：https://teqcube.com/stackoverflow/download/views.zip
COMPOSER.JSON
"php": "^7.2.5|^8.0",
"laravel/framework": "^7.29",
"livewire/livewire": "^2.0",
资源/视图/布局/GENERAL.BLADE.PHP
<body onload="initAutocomplete()">
资源/视图/DEFAULT.BLADE.PHP
@section('header-scripts')
<script type="text/javascript">
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete1 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete1')), {
types: ['geocode']
});
autocomplete1.setComponentRestrictions(
{'country': ['it']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
// autocomplete.addListener('place_changed', fillInAddress);
autocomplete2 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
autocomplete2.setComponentRestrictions(
{'country': ['it']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
// autocomplete2.addListener('place_changed', fillInAddress2);
}
</script>
@endsection
资源/视图/LIVEWIRE/WIZARD.BLADE.PHP
<div class="row setup-content {{ $currentStep != 1 ? 'display-none' : '' }}" id="step-1">
<div class="col-md-12">
<h3> Step 1</h3>
<!-- https://stackoverflow.com/questions/20416058/adding-multiple-instances-of-google-places-on-same-page -->
<!-- PICKUP LOCATION -->
<div class="form-group col-md-6">
<label for="trip_pickup_location">Pick-up Destination</label>
<input type="text" wire:model="trip_pickup_location" class="controls autocomplete form-control-lg form-control" id="autocomplete1" autocomplete="off" placeholder="Pick-up Destination">
@error('trip_pickup_location') <span class="error">{{ $message }}</span> @enderror
</div>
<!-- DROPOFF LOCATION -->
<div class="form-group col-md-6">
<label for="trip_dropoff_location">Drop-off Destination</label>
<input type="text" wire:model="trip_dropoff_location" class="controls autocomplete form-control-lg form-control" id="autocomplete2" autocomplete="off" placeholder="Drop-off Destination">
@error('trip_dropoff_location') <span class="error">{{ $message }}</span> @enderror
</div>
<!-- PICKUP LOCATION -->
<!-- <div class="form-group col-md-6">
<label for="trip_pickup_location">Pick-up Destination</label>
<input type="text" wire:model="trip_pickup_location" onfocus="geolocate()" class="controls autocomplete form-control-lg form-control" id="autocomplete1" autocomplete="off" placeholder="Pick-up Destination">
@error('trip_pickup_location') <span class="error">{{ $message }}</span> @enderror
</div> -->
<!-- DROPOFF LOCATION -->
<!-- <div class="form-group col-md-6">
<label for="trip_dropoff_location">Drop-off Destination</label>
<input type="text" wire:model="trip_dropoff_location" onfocus="geolocate()" class="controls autocomplete form-control-lg form-control" id="autocomplete2" autocomplete="off" placeholder="Drop-off Destination">
@error('trip_dropoff_location') <span class="error">{{ $message }}</span> @enderror
</div> -->
<div class="form-group">
<label for="description">Pickup Date:</label>
<input type="text" wire:model="trip_pickup_date" class="form-control" id="trip_pickup_date" />
@error('trip_pickup_date') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Pick Up Time:</label>
<input type="text" wire:model="trip_pickup_time" class="form-control" id="trip_pickup_time" />
@error('trip_pickup_time') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Pax Amount:</label>
<input type="text" wire:model="trip_pax_amount" class="form-control" id="trip_pax_amount" />
@error('trip_pax_amount') <span class="error">{{ $message }}</span> @enderror
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" wire:click="firstStepSubmit"
type="button">
Next
</button>
</div>
</div>
【问题讨论】：
标签： javascript php jquery laravel google-api