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