Vuetify步进器显示在表单自动完成数据的前面

Question

我正在使用Vuetify步进器来构建多步表单。 在添加组件之前，我已经对表单进行了编码，并且可以正常工作，但是当我尝试与步进器一起使用时，它显示的数据如图所示，表单的数据显示在步进器后面。

这是我的代码，首先是步进器组件代码

<v-stepper v-model="e6" vertical>
  <v-stepper-step :complete="e6 > 1" step="1">
    Choose your upload and download points
    <small>Choose your upload and download points</small>
  </v-stepper-step>

  <v-stepper-content step="1">
    <div id="map"></div>
      <div class="form-group">
        <label for="upload_point">Upload point:</label>
        <input
          ref="autocomplete"
          type="text"
          placeholder="Search"
          class="form-control uploadPoint"
          onfocus="value = ''"
        >
      </div>
  </v-stepper-content>
</v-stepper>

用于处理Google地图中自动填充功能的代码

// importing google maps places API to autocomplete
let autocomplete = new google.maps.places.Autocomplete(
this.$refs.autocomplete
)
// handling event changes
autocomplete.addListener('place_changed', function() {
infowindow.close()
marker.setVisible(false)
var place = autocomplete.getPlace()
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport)
} else {
    map.setCenter(place.geometry.location)
    map.setZoom(12)
}
marker.setPosition(place.geometry.location)
marker.setVisible(true)
infowindow.open(map, marker)
})

我尝试将z-index与该表单一起使用，但是它不起作用

.uploadPoint {
  z-index: 1000;
}