jQuery geocomplete не работает с vue js

Question

Когда я завершаю форму с помощью jQuery geocomplete в модуле Vue, геокомплект перестает работать. Я не уверен, как это исправить, так что геокомплект работает, когда модаль активен.

Вот рабочий пример без 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> 

Answer 1

Я вижу ваш geocomplete родственный код в $(document).ready(function(). Исходя из этого answer, вы можете переместить код внутри document.ready в один из lifecycle hooks для этой цели. Вы можете попробовать использовать mounted, как это происходит довольно близко к $ (документ) .ready():

Vue.component('modal', { 
    template: '#modal-template', 
    mounted() { 
    $("#autocomplete").geocomplete({ 
    details: "form div", 
    detailsAttribute: "data-geo", 
    types: ["(cities)"], 
    componentRestrictions: { 
     country: "in" 
    } 
    }); 
    } 
}) 

С этими изменениями, вы код начинает показывать предложение: проверить here. Вам могут потребоваться некоторые другие изменения пользовательского интерфейса, чтобы увидеть раскрывающийся список geocomplete.