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() 中。从这个 , you can move code inside document.ready to one of the lifecycle hooks for this purpose. You can try using 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 下拉菜单。

jquery geocomplete 无法与 vue js 一起使用

jquery geocomplete not working with vue js

javascript

jquery

modal-dialog

geocode

vue.js