Use both Vue.js and jQuery autocomplete

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
});

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://unpkg.com/vue





Toggle


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?

v-if

v-if

Have you tried v-show? v-if makes the element not be in the dom if the conditional is false, so it would not be there for the jQuery to find it. v-show makes the element be there, but if it is false it will be hidden, but still exist. Or conversely you could try v-hide="!update"
– Taplar
Jun 29 at 15:15

v-show

v-hide="!update"

Thank you very much!!
– JacopoStanchi
Jun 29 at 15:17

1 Answer
1

There are a couple things to note here.

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

$(selector)

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

v-if

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.

v-if

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

v-if

v-if

v-if

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.

v-if

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

v-show

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.

v-show

v-hide

v-if

v-show

v-hide

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.

v-if

v-if

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
});

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://unpkg.com/vue






Toggle


Can I add the code of the solution to your answer?
– JacopoStanchi
Jun 29 at 16:00

Sure, I wouldn't be offended.
– Taplar
Jun 29 at 16:01

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.