同时使用 Vue.js 和 jQuery 自动完成

Question

我想同时使用 Vue.js 和 jQuery 来动态显示自动完成字段。

new Vue({
  el: "#el",
  data: {
    toggle: false
  }
});

var tags = [
  "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
  "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
  "Ruby","Scala","Scheme"
];

$("#autocompleteSearch").autocomplete({
  source: tags
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="el">
  <input v-if="toggle" id="autocompleteSearch" type="search">
  <button @click="toggle=!toggle">Toggle</button>
</div>

如您所见，由于输入中的v-if，它无法工作。如果我删除 v-if 它可以工作，但它不会动态显示。我该怎么办？

Answer 1

这里有几点需要注意。

$(selector) 在那个时间点查找现有的 DOM 元素

要让 jQuery 找到一个元素，当您执行查找时，它必须存在于 DOM 中。关于 DOM 片段有一些警告，但这与这个特定问题无关。所以请记住，要让 jQuery 找到某些东西，它必须存在于 DOM 中。

许多 jQuery UI 方法初始化和转换元素

当您执行 jQuery UI 方法（如自动完成）时，jQuery 会更改并在页面上创建与您定位的元素相关的标记。这些方法还可以保留与元素相关的内部变量作为其初始化的一部分。

v-if 创建和销毁元素

v-if 的目的是说，一个元素应该只存在如果某些条件为真。所以如果条件为假，它就不会存在于 DOM 中。此外，如果此条件可能发生变化，则该元素可能会被创建和销毁多次。

---

所以考虑到v-if 的工作原理，我们可以反思前两点。

• 如果 v-if 使得 jQuery 选择器运行时元素不存在，它将找不到要初始化的元素
• 如果v-if 破坏了一个元素，jQuery UI 小部件可能无法正常运行，因为它与它初始化的元素相关，而不是为替换先前创建的元素而创建的未来元素。

---

考虑到这一点，在使用 Vue 和 jQuery 时，您必须牢记两者的需求，以及它们如何相互冲突，例如在这种情况下。 v-if 的使用不一定是当它控制的元素也用作另一个库（例如 jQuery）中状态的一部分时使用的最佳指令。

为了解决这个问题，您可以选择使用另一个指令，例如 v-show 或 v-hide。

v-show 和 v-hide 是同一枚硬币的两个面。他们确定一个元素是否应该对用户可见。这两个指令与v-if 的明显区别在于v-show 和v-hide 不会从DOM 中删除元素。它们只是改变元素的显示状态。

因此，相对于另一个依赖现有元素并将该元素用作某些状态管理的一部分的库，这太棒了！您可以控制用户何时看到元素，还可以避免与辅助库（例如 jQuery UI）发生冲突。

---

话虽如此，但这并不意味着您不应该使用v-if。 v-if 对于在某些时间点不应该存在的元素仍然有用。这意味着您应该了解您正在制作的情况，并考虑您的应用程序中可能依赖这些元素的任何其他逻辑，以最大程度地减少创建错误的机会。

---

TL;DR;

以下是您的问题的解决方案：

new Vue({
  el: "#el",
  data: {
    toggle: false
  }
});

var tags = [
  "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
  "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
  "Ruby","Scala","Scheme"
];

$("#autocompleteSearch").autocomplete({
  source: tags
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="el">
  <!-- Just replace v-if by v-show -->
  <input v-show="toggle" id="autocompleteSearch" type="search">
  <button @click="toggle=!toggle">Toggle</button>
</div>