同时使用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小部件可能无法正常运行，因为它与它初始化的元素有关，而不是与替换先前创建的元素有关的未来元素。
li>

---

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

为解决此问题，您可以选择使用其他指令，例如v-hide或v-show。

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

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

---

话虽如此，这并不意味着您不应该使用v-if。 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 });对于在某些时间点不应该存在的元素仍然有用。所有这些意味着您应该意识到自己的处境，并考虑应用程序中可能依赖于这些元素的任何其他逻辑，以最大程度地减少创建错误的机会。

---

TL; DR;

这是您解决问题的方法：

<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>

{{1}}