在Vue.js单文件组件中使用jQuery插件

问题描述:

我正在尝试在我的Vue.js单中使用这个 jQuery插件文件组件。

I am trying to use this jQuery plugin in my Vue.js single file component.

根据我在 index.html 中导入引用的链接自动完成插件的要求,让所有其他人都可以使用vue组件,我需要在输入字段中使用 autocomplete 功能。

as required in the linked autocomplete plugin I imported references in index.html, for them to be available all other vue components where I need to use autocomplete feature in 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>

但是当我在单个文件组件的脚本标记中包含以下代码时。

But when I include below code in the script tag of my single file component.

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

But I have included the dependencies in index.html

I would suggest u not to use Jquery in Vue. Its bad practice. There is a number of vue plugins u can use and even create your own (which is best option 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 /