使用Vue.js和jQuery自动完成

Question

I want to use both Vue.js and jQuery to make an autocomplete field displayed dynamically.

 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> 

As you can see, it cannot work because of the v-if on the input. If I remove the v-if it works, but it is not displayed dynamically. How should I do?

Answer 1

There are a couple things to note here.

$(selector) looks up existing DOM elements at that point in time

For jQuery to find an element, it has to exist in the DOM when you perform the lookup. There are caveats to this regarding DOM Fragments, but that's not relevant for this particular question. So keep in mind that for jQuery to find something, it has to exist in the DOM.

Many jQuery UI methods initialize and transform elements

When you execute a jQuery UI method, like autocomplete, jQuery changes and creates markup on the page, related to the elements you are targeting. These methods can also keep internal variables related to the element as part of its initialization.

v-if creates and destroys elements

The purpose of the v-if is to say that, an element should only exist if some conditional is true. So if the conditional is false, it will not exist in the DOM. Also, if this conditional is subject to change, the element can potentially be created and destroyed many times.

---

So taking into account how v-if works, we can reflect on the two previous points.

• If a v-if makes it so that an element does not exist when the jQuery selector runs, it will not find the element to initialize
• If a v-if destroys an element, the jQuery UI widget may not function properly because it was related to the element that it initialized, and not a future element that is created to replace the previously created element.

---

With that in mind, when working with Vue and jQuery you have to keep in mind the needs of both, and how they may conflict with each other, such as in this case. The use of v-if is not necessarily the best directive to use when the element it controls is also used as part of a state in another library, such as jQuery.

In order to fix that, you can choose to use another directive, such as v-show or v-hide .

v-show and v-hide are two sides to the same coin. They determine if an element should be visible or not to the user. The distinct difference between these two directives and v-if is that v-show and v-hide do not remove the element from the DOM. They simply change the display state of the element.

So in relation to another library that relies on an element existing and using that element as part of some state management, this is great! You can control when your users see an element, and also potentially avoid conflicting with the secondary library, such as jQuery UI.

---

Having said that, this does not mean you should not use v-if . v-if is still useful for elements that should not exist at certain points in time. All this means is that you should be aware of the situation you are making, and consider any other logic in your application that may rely on those elements in order to minimize the chances of creating a bug.

---

TL;DR;

Here is the solution to your problem:

 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>