在Vue.js单文件组件中使用jQuery插件 [英] Using jQuery plugin in Vue.js single file component

问题描述

我正在尝试在我的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

推荐答案

<我建议你不要在Vue中使用Jquery。这是不好的做法。有许多vue插件你可以使用甚至创建你自己的（这是最好的选择恕我直言）

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 /

这篇关于在Vue.js单文件组件中使用jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！