当我在 Vue 模式中使用 jquery geocomplete 包装表单时,geocomplete 停止工作。我不知道如何修复它,以便在模式处于事件状态时 geocomplete 可以正常工作。
这是一个没有 Vue 或模态的工作示例: https://jsfiddle.net/3gzovugy/68/
这是相同的示例,包含在 vue 站点的示例模式中,不会进行地理编码。有什么建议么? https://jsfiddle.net/3gzovugy/96/
<div id="app">
<button id="show-modal" @click="showModal = true">Show Modal</button>
<modal v-if="showModal" @close="showModal = false">
<div slot="body">
<form>
<div class="item">
<input id="autocomplete" placeholder="Look up your address" type="text">
</div>
<div class="item">
<input class="cat_textbox" id="houseNo" data-geo="street_number" type="text" placeholder="House Number" maxlength="50" />
</div>
<div class="item">
<input class="cat_textbox" id="street" data-geo="route" type="text" placeholder="street" maxlength="50" />
</div>
<div class="item">
<input class="cat_textbox red" id="BillingAddress" data-geo="street_address" type="text" placeholder="Billing Address" maxlength="50" name="BillingAddress" />
</div>
</form>
</div>
</modal>
</div>
<template id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
最佳答案
我看到您的 geocomplete
相关代码位于 $(document).ready(function()
中。从 answer 中获得灵感,您可以将代码移至 <为此,您可以尝试使用 lifecycle hooks,因为它非常接近 $(document).ready():
Vue.component('modal', {
template: '#modal-template',
mounted () {
$("#autocomplete").geocomplete({
details: "form div",
detailsAttribute: "data-geo",
types: ["(cities)"],
componentRestrictions: {
country: "in"
}
});
}
})
通过这些更改,您的代码开始显示建议:检查 mounted 。您可能需要进行一些其他 UI 更改才能看到顶部的 geocomplete
下拉列表。
关于javascript - jquery geocomplete 无法与 vue js 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41499941/