Livewire 多步骤预订表格清除 Google 从输入字段映射自动完成值

Question

我希望有人能帮我解决一个问题，在进行了大量研究并实施了不同的代码之后，我一直在努力解决这个问题，但似乎没有任何效果。

我正在使用 Livewire 多步预订表格：https://www.positronx.io/laravel-livewire-wizard-form-tutorial-with-example/

第一步，前两个输入字段是上车地点和下车地点。（位置仅限于意大利）

当我删除 Livewire 脚本时，Google 具有完整地址的地图自动完成功能会用所需的值填充输入字段，但随后 表单无法进行步骤 2.

当我添加 Livewire 脚本时，表单可以工作，但是取车地点和下车地点 将清除自动完成地址并仅提交在自动建议给出完整地址 之前输入的内容。

我添加了 dd($validatedData);在 Wizard.php 处查看进行到第 2 步时会发生什么。

对于解决上述问题的任何支持或建议，我将不胜感激。

现场测试URL：https://teqcube.com/Whosebug
下载带有注释代码的视图文件（试错功能）：https://teqcube.com/Whosebug/download/views.zip

COMPOSER.JSON

"php": "^7.2.5|^8.0",
"laravel/framework": "^7.29",
"livewire/livewire": "^2.0",

RESOURCES/VIEWS/LAYOUTS/GENERAL.BLADE.PHP

<body onload="initAutocomplete()">

RESOURCES/VIEWS/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

RESOURCES/VIEWS/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>
      
      <!--  -->

      <!-- 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>

Answer 1

也许看看这个，使用 alpine 可能会让你朝着正确的方向前进。 https://forum.laravel-livewire.com/t/wire-ignore-with-google-autocomplete/734

Livewire 多步骤预订表格清除 Google 从输入字段映射自动完成值

Livewire Multi Step Booking Form clearing Google Map Autocomplete values from input fields

javascript

php

jquery

google-api

laravel