Using jQuery plugin in Vue.js single file component(在 Vue.js 单文件组件中使用 jQuery 插件)
问题描述
我正在尝试在我的 Vue.js 单曲中使用 this jQuery 插件文件组件.
I am trying to use this jQuery plugin in my Vue.js single file component.
根据链接的自动完成插件的要求,我在 index.html 中导入了引用,以便它们在我需要使用
.autocomplete
功能的所有其他 vue 组件中可用代码>输入框
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
推荐答案
检查 html 中 js 文件/脚本的顺序.Vue 脚本可能在加载 jQuery 之前执行.将 jQuery 相关的脚本标签移到 Vue 脚本标签上方.您还可以通过检查 window.$
的存在来安全地检查 jQuery 在您的 Vue 脚本中是否可用:
Check the order of js files/script inside your html. It's possible that the Vue script is executed before jQuery is loaded. Move jQuery-related script tags above Vue script tags. You can also safely check if jQuery is available in your Vue script by checking for existence of window.$
:
if (typeof window.$ === 'function') {
$("#autocomplete").autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
}
这篇关于在 Vue.js 单文件组件中使用 jQuery 插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:在 Vue.js 单文件组件中使用 jQuery 插件
基础教程推荐
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 动态更新多个选择框 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01