Использование плагина jQuery в отдельном файловом компоненте Vue.js

Question

Я пытаюсь использовать этот плагин jQuery в одном компоненте моего файла Vue.js.

как требуется в подключаемом плагине автозаполнения. Я импортировал ссылки в index.html, чтобы они были доступны для всех других компонентов vue, где мне нужно использовать функцию autocomplete в input field.

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Но когда я включаю приведенный ниже код в тег script моего компонента с одним файлом.

 $("#autocomplete").autocomplete({
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });

Я получаю сообщение об ошибке, в котором говорится:

> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
>     source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)

Но я включил зависимости вindex.html

Answer 1

Проверьте порядок js файлов / скриптов внутри html.Возможно, сценарий Vue выполняется до загрузки jQuery.Переместите теги сценария, относящиеся к jQuery, над тегами сценария Vue.Вы также можете безопасно проверить, доступен ли jQuery в вашем скрипте Vue, проверив наличие window.$:

if (typeof window.$ === 'function') {
  $("#autocomplete").autocomplete({
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });
}

Answer 2

Я бы посоветовал вам не использовать Jquery в Vue.Это плохая практика.Существует множество плагинов vue, которые вы можете использовать и даже создавать свои (это лучший вариант IMHO)

https://www.npmjs.com/package/vue2-autocomplete-js https://github.com/paliari/v-autocomplete https://vuejsexamples.com/tag/autocomplete/ https://alligator.io/vuejs/vue-autocomplete-component/

Answer 3

Решение: используйте компонент в качестве оболочки

Ознакомьтесь с руководством здесь: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/