当我在Vue模式中使用jquery 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>
答案 0 :(得分：1)
我看到您的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<button
class="mdl-button mdl-js-button mdl-button--icon open-modal-button">
<!-- <i class="material-icons">view_module</i>-->
</button>
<!-- Add button here -->
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="story-summary">
<h4>Story One</h4>
<p>Story story story story story story story story story story story story story story story story.</p>
</div>
</div>
<!-- .mdl-layout__header-row -->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link navLink1" href="#tabs-container1">Link One</a>
<a class="mdl-navigation__link navLink2" href="#tabs-container2">Link Two</a>
<a class="mdl-navigation__link navLink3" href="#tabs-container3">Link Three</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container1" class="mdl-tabs mdl-js-tabs tabs-container1">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#alpha" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#beta" class="mdl-tabs__tab" style="color:white;" >Beta</a>
<a href="#gamma" class="mdl-tabs__tab" style="color:white;" >Gamma</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="alpha" class="mdl-tabs__panel is-active" style="background-color:pink;" >
What is Lorem Ipsum?
em Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors nefore always free from repetition, injected humour, or non-characteristic words etc.
</section>
<section id="beta" class="mdl-tabs__panel" style="background-color:wheat;" >terdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor, facilisis nibh at, blandit velit. Mauris aliquet orci eu ante mollis auctor. Vivamus tristique vitae sem sit amet dictum. Nulla sit amet feugiat nibh. Fusce interdum felis in ex interdum, id eleifend lectus sodales. Praesent ultrices tincidunt magna nec cursus. Vivamus turpis ligula, luctus eget semper sed, gravida eget felis.
nean mauris urna, sagittis in urna sed, condimentum pretium arcu.
</section>
<section id="gamma" class="mdl-tabs__panel" style="background-color:grey;" >
(de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section><!-- .mdl-tabs.mdl-js-tabs -->
-------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container2" class="mdl-tabs mdl-js-tabs tabs-container2">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#delta" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#zelda" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="delta" class="mdl-tabs__panel" style="background-color:green;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo e
</section>
<section id="zelda" class="mdl-tabs__panel" style="background-color:yellow;" >
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section> <!-- .mdl-tabs.mdl-js-tabs -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container3" class="mdl-tabs mdl-js-tabs tabs-container3">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#maroon" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#orange" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="maroon" class="mdl-tabs__panel" style="background-color:maroon;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur phar
</section>
<section id="orange" class="mdl-tabs__panel" style="background-color:orange;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur pharetra magna, eu rutrum est. Duis quis diam sed neque accumsan condimentum sit amet non felis. Integer efficitur porta nisi non tristique. Cras efficitur massa metus, in scelerisque elit dictum ac. Nulla viverra, ligula non vestibulum tincidunt, turpis erat interdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor,
</section>
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
</main>
</div>相关代码位于{
"field": "cat",
"value": "electronics",
"count": 12,
"pivot": [
{
"field": "inStock",
"value": true,
"count": 8,
"stats": {
"stats_fields": {
"price": {
"min": 74.98999786376953,
"max": 399.0
}
}
}
},
{
"field": "inStock",
"value": false,
"count": 4,
"stats": {
"stats_fields": {
"price": {
"min": 11.5,
"max": 649.989990234375
}
}
}
}
],
"stats": {
"stats_fields": {
"price": {
"min": 11.5,
"max": 649.989990234375
}
}
}
}
。从这个answer中获取灵感，您可以将geocomplete内的代码移动到lifecycle hooks之一，以实现此目的。您可以尝试使用mounted，因为它非常接近$（document）.ready（）：
$(document).ready(function()通过这些更改，您的代码开始显示建议：检查here。您可能需要进行其他一些UI更改才能看到document.ready下拉列表。