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

Question

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

根据链接的自动完成插件的要求，我在index.html 中导入了引用，以便它们可以在我需要在input field 中使用autocomplete 功能的所有其他vue 组件中使用。

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

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

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

我建议你不要在 Vue 中使用 Jquery。它的坏习惯。您可以使用许多 vue 插件，甚至可以创建自己的插件（恕我直言，这是最好的选择）

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 2

检查 html 中 js 文件/脚本的顺序。 Vue 脚本可能在加载 jQuery 之前执行。将 jQuery 相关的脚本标签移到 Vue 脚本标签上方。您还可以通过检查 window.$ 的存在来安全地检查 Vue 脚本中是否有 jQuery：

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

Answer 3

解决方案：使用组件作为包装器

在此处查看教程： https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/