Используйте автозаполнение как Vue.js, так и jQuery. - PullRequest
Новая
       12

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

0 голосов
/ 29 июня 2018

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

1 Ответ

0 голосов
/ 29 июня 2018

Здесь нужно отметить пару вещей.

$(selector) ищет существующие элементы DOM на данный момент времени

Чтобы jQuery мог найти элемент, он должен существовать в DOM, когда вы выполняете поиск. Есть предостережения относительно фрагментов DOM, но это не относится к данному конкретному вопросу. Так что имейте в виду, что для того, чтобы jQuery что-то нашел, он должен существовать в DOM.

Многие методы пользовательского интерфейса jQuery инициализируют и преобразуют элементы

Когда вы выполняете метод пользовательского интерфейса jQuery, такой как автозаполнение, jQuery изменяется и создает разметку на странице, связанную с элементами, на которые вы ориентируетесь. Эти методы также могут сохранять внутренние переменные, связанные с элементом, как часть его инициализации.

v-if создает и уничтожает элементы

Цель v-if состоит в том, чтобы сказать, что элемент должен существовать только , если какое-то условие верно. Таким образом, если условие ложно, оно не будет существовать в DOM. Кроме того, если это условие может быть изменено, элемент может потенциально создаваться и уничтожаться много раз.

Итак, учитывая, как работает v-if, мы можем поразмышлять над двумя предыдущими пунктами.

  • Если v-if делает так, что элемент не существует при запуске селектора jQuery, он не найдет элемент для инициализации
  • Если элемент v-if уничтожает элемент, виджет пользовательского интерфейса jQuery может работать неправильно, поскольку он связан с инициализированным элементом, а не с будущим элементом, созданным для замены ранее созданного элемента.

Имея это в виду, при работе с 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>
...