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