javascript - jquery geocomplete 无法与 vue js 一起使用

Question

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

Answer 1

我看到您的 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 下拉列表。