Здесь есть пара вещей.
$(selector) просматривает существующие элементы DOM в этот момент времени
Чтобы jQuery мог найти элемент, он должен существовать в DOM при выполнении поиска. В отношении DOM Fragments есть оговорки, но это не относится к этому конкретному вопросу. Поэтому имейте в виду, что для jQuery, чтобы найти что-то, он должен существовать в DOM.
Многие методы пользовательского интерфейса jQuery инициализируют и преобразуют элементы
Когда вы выполняете jQuery UI-метод, например автозаполнение, jQuery меняет и создает разметку на странице, связанную с элементами, на которые вы нацеливаетесь. Эти методы также могут содержать внутренние переменные, связанные с элементом, как часть его инициализации.
v-if создает и уничтожает элементы
Цель v-ifсостоит в том, чтобы сказать, что элемент должен существовать только в том случае, если какое-либо условие истинно. Поэтому, если условное значение false, оно не будет существовать в DOM. Кроме того, если это условие может быть изменено, элемент может потенциально быть создан и уничтожен много раз.
Поэтому, учитывая, как v-ifработает, мы можем размышлять над двумя предыдущими пунктами.
- Если a
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.
Сказав это, это не значит, что вы не должны использовать 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>