Javascript Google Maps在Vue.js引导模式下自动完成

我有带

的Boostrap模式。我使用以下众所周知的技巧实现了Google autocomplete：

.pac-container {
    z-index: 10000 !important;
}

现在，我正在努力使自动完成工作在第二层Boostrap模式。不幸的是，

z-index

技巧在这里不起作用

<div class="modal fade" id="editItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div id="editItem" class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    Update Address <b>{{selectedItem.properties.NAME}}</b>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="sr-only" for="editItem_ADRESS1"></label>
                            <input v-model="selectedItem.properties.ADRESS1" type="text" class="form-control" id="editItem_ADRESS1" ref="editItem_ADRESS1" placeholder="{{selectedItem.properties.ADRESS1}}">
                        </div>    
                    </form>          
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-success btn-ok" @click="save_item()" data-dismiss="modal">Save</a>
                </div>
            </div>
        </div>
    </div>

---

最后，我终于弄清了问题所在。当Google

iniAutocomplete（）

函数设置监听器时，事实证明，DOM对象还不是由Vue创建的

此外，我的

没有运行Google

geologice（）

函数。这就是

现在的样子：

<div class="form-group">
    <label class="sr-only" for="edit-item_ADRESS1"></label>
        <input id="edit-item_ADRESS1" v-model="selectedItem.properties.ADRESS1" type="text" class="form-control" onFocus="geolocate('edit-item')">
</div>

<div class="form-group">
    <label class="sr-only" for="edit-item_ADRESS1"></label>
        <input id="edit-item_ADRESS1" v-model="selectedItem.properties.ADRESS1" type="text" class="form-control" onFocus="geolocate('edit-item')">
</div>

if (action == "add-item") {
      autocomplete_add_item.setBounds(circle.getBounds());
}
if (action == "edit-item") {
      // we need to run iniAutocomplete again after the  DOM object was finally created by Vue
      initAutocomplete();
      autocomplete_edit_item.setBounds(circle.getBounds());
}