jquery geocomplete不适用于vue js答案

【问题标题】：jquery geocomplete not working with vue jsjquery geocomplete不适用于vue js
【发布时间】：2017-01-06 06:08:55
【问题描述】：

当我在 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>

【问题讨论】：

标签： javascript jquery modal-dialog vue.js geocode

【解决方案1】：

我看到您的geocomplete 相关代码在$(document).ready(function() 中。从此answer 中汲取灵感，您可以将document.ready 中的代码移动到lifecycle hooks 之一。您可以尝试使用mounted，因为它非常接近 $(document).ready()：

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

通过这些更改，您的代码开始显示建议：检查here。您可能需要进行一些其他 UI 更改才能看到顶部的 geocomplete 下拉菜单。

【讨论】：