使用Vue.js在Bootstrap模态框中实现Google地图自动完成。

Question

我有一个带有<input>的Bootstrap模态框。我已经使用以下众所周知的技巧为其实现了Google自动完成：

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

我正努力让第二层Bootstrap模态框内的自动完成功能正常工作，但不幸的是，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
        });

- IgorM

Answer 1

最终，我成功找到了问题所在。原来当Google的iniAutocomplete()函数设置监听器时，Vue还没有创建DOM对象。

此外，我的<input>没有运行Google的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());
}

- IgorM