Используйте как Vue.js, так и jQuery autocomplete

Я хочу использовать 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его, он будет работать, но он не будет отображаться динамически. Как мне это сделать?

javascript,jquery,jquery-ui,vue.js,jquery-ui-autocomplete,

1

Ответов: 1


2 принят

Здесь есть пара вещей.

$(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>

JavaScript, JQuery, JQuery-щ, vue.js, JQuery-щ-автозаполнения,
Похожие вопросы