使用 Vue.js 在 Bootstrap 模式中自动完成谷歌地图答案

【问题标题】：Google Maps autocomplete in Bootstrap modal with Vue.js使用 Vue.js 在 Bootstrap 模式中自动完成谷歌地图
【发布时间】：2018-07-16 22:53:46
【问题描述】：

我有 <input> 的 Boostrap 模态。我使用以下众所周知的技巧为它实现了 Google 自动完成功能：

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

然后是 Vue 对象

const editItem = new Vue({
            el: "#editItem",
            data: {
                items: null,
                selectedItem: null,
            },
            methods: {
                save_item() {
                    this.selectedItem = itemsList.selectedItem;
                    var ip = location.host;
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: 'http://' + ip + '/updateItem',
                        data: {
                              command: "edit_item",
                              item_id: this.selectedItem.id,
                              adress1: this.selectedItem.properties.ADRESS1
                        },
                        success: function (responseData) {
                            if (responseData.result === false) {
                                console.log(responseData.result);
                            }
                            else {
                                console.log("successfully updated");
                            }
                        },
                        error: function (error) {
                            console.log('error', error);
                            }
                        }); // end of ajax
                    } // end od save_item()
                } // end of methods
        });

【问题讨论】：

标签： javascript twitter-bootstrap google-maps vue.js autocomplete

【解决方案1】：

最后，我能够找出问题所在。事实证明，当 Google iniAutocomplete() 函数设置监听器时，Vue 还没有创建 DOM 对象。

另外，我的<input> 没有运行谷歌geolocate() 功能。这就是<input> 现在的样子：

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

下一步是对geolocate() 函数进行细微更改。我传递action 变量onFocus 事件并使用它来确定发起调用的DOM 对象。

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());
}

【讨论】：