时间戳

首页 > 解决方案 > 在 Vue.js 单文件组件中使用 jQuery 插件

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

问题描述

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

根据链接的自动完成插件中的要求，我在 中导入了引用index.html，以便它们在我需要使用autocomplete功能的所有其他 vue 组件中可用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>

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

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

标签： javascriptjqueryvue.jsvuejs2vue-component

解决方案

Solution: use a component as a wrapper

Check out the tutorial here: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

推荐阅读