jquery geocompleteがvue jsと連携していません

Question

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> 

Answer 1

私はあなたのgeocomplete関連するコードが$(document).ready(function()である参照してください。このanswerからインスピレーションを得て、document.readyのコードをlifecycle hooksのいずれかに移動できます。それは$（ドキュメント）.ready（）にかなり近づくとあなたはmountedを使用して試すことができます：hereをチェックします。これらの変更により

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

は、あなたのコードでは、提案が示し始めます。 geocompleteのドロップダウンリストを表示するには、他のUIを変更する必要があります。