Using jQuery plugin in Vue.js single file component
I am trying to use this jQuery plugin in my Vue.js single file component.
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" ]
});
I get error console saying:
> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
> source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)
But I have included the dependencies in index.html
javascript jquery vue.js vuejs2 vue-component
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
add a comment |
I am trying to use this jQuery plugin in my Vue.js single file component.
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" ]
});
I get error console saying:
> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
> source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)
But I have included the dependencies in index.html
javascript jquery vue.js vuejs2 vue-component
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
add a comment |
I am trying to use this jQuery plugin in my Vue.js single file component.
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" ]
});
I get error console saying:
> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
> source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)
But I have included the dependencies in index.html
javascript jquery vue.js vuejs2 vue-component
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
I am trying to use this jQuery plugin in my Vue.js single file component.
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" ]
});
I get error console saying:
> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete({
> source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] })', '$("#autocomplete").autocomplete' is undefined)
But I have included the dependencies in index.html
javascript jquery vue.js vuejs2 vue-component
javascript jquery vue.js vuejs2 vue-component
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
edited Dec 29 '18 at 5:53
A.H.Nuri
813510
813510
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
asked Dec 29 '18 at 5:47
Ciasto piekarzCiasto piekarz
2,30143387
2,30143387
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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/
answered Dec 29 '18 at 21:51
webmintwebmint
1011
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
add a comment |
Solution: use a component as a wrapper
Check out the tutorial here:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
add a comment |
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" ]
});
}
answered Dec 29 '18 at 7:46
blazblaz
1,363715
well if it was the case of jQuery not loading up then I might have go terror at$("#autocomplete")but I am getting error.autocomplete
– Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,autocompleteis not defined while in my demo it is there.
– blaz
Dec 30 '18 at 6:25
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53967042%2fusing-jquery-plugin-in-vue-js-single-file-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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/
answered Dec 29 '18 at 21:51
webmintwebmint
1011
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
add a comment |
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/
answered Dec 29 '18 at 21:51
webmintwebmint
1011
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
add a comment |
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/
answered Dec 29 '18 at 21:51
webmintwebmint
1011
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/
answered Dec 29 '18 at 21:51
webmintwebmint
1011
answered Dec 29 '18 at 21:51
webmintwebmint
1011
answered Dec 29 '18 at 21:51
webmintwebmint
1011
answered Dec 29 '18 at 21:51
webmintwebmint
1011
1011
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
add a comment |
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
I agree with you , but right now I am short of time, and yesterday night I stayed up late to get things working using jQuery
– Ciasto piekarz
Dec 30 '18 at 3:39
add a comment |
Solution: use a component as a wrapper
Check out the tutorial here:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
add a comment |
Solution: use a component as a wrapper
Check out the tutorial here:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
add a comment |
Solution: use a component as a wrapper
Check out the tutorial here:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
Solution: use a component as a wrapper
Check out the tutorial here:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
answered Dec 29 '18 at 5:54
TriDiamondTriDiamond
537114
537114
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
add a comment |
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
;( the first line says : > It's not a great idea to use jQuery and Vue.js in the same UI. Don't do it if you can avoid it. secondly I get error at the time of instantiation
– Ciasto piekarz
Dec 29 '18 at 5:56
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
Yeah i don't recommend using jquery in Vue.js either, if you just want a autocomplete feature there are plenty of components out there. For example this npmjs.com/package/vue2-autocomplete-js
– TriDiamond
Dec 29 '18 at 5:57
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
I have tried in the first attempt and that didn't worked at all, I also tried vie-single-select that had problem you cannot enter new item not in list
– Ciasto piekarz
Dec 29 '18 at 5:58
add a comment |
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" ]
});
}
answered Dec 29 '18 at 7:46
blazblaz
1,363715
well if it was the case of jQuery not loading up then I might have go terror at$("#autocomplete")but I am getting error.autocomplete
– Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,autocompleteis not defined while in my demo it is there.
– blaz
Dec 30 '18 at 6:25
|
show 1 more comment
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" ]
});
}
answered Dec 29 '18 at 7:46
blazblaz
1,363715
well if it was the case of jQuery not loading up then I might have go terror at$("#autocomplete")but I am getting error.autocomplete
– Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,autocompleteis not defined while in my demo it is there.
– blaz
Dec 30 '18 at 6:25
|
show 1 more comment
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" ]
});
}
answered Dec 29 '18 at 7:46
blazblaz
1,363715
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" ]
});
}
answered Dec 29 '18 at 7:46
blazblaz
1,363715
answered Dec 29 '18 at 7:46
blazblaz
1,363715
answered Dec 29 '18 at 7:46
blazblaz
1,363715
answered Dec 29 '18 at 7:46
blazblaz
1,363715
1,363715
well if it was the case of jQuery not loading up then I might have go terror at$("#autocomplete")but I am getting error.autocomplete
– Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,autocompleteis not defined while in my demo it is there.
– blaz
Dec 30 '18 at 6:25
|
show 1 more comment
well if it was the case of jQuery not loading up then I might have go terror at$("#autocomplete")but I am getting error.autocomplete
– Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,autocompleteis not defined while in my demo it is there.
– blaz
Dec 30 '18 at 6:25
well if it was the case of jQuery not loading up then I might have go terror at
$("#autocomplete") but I am getting error .autocomplete – Ciasto piekarz
Dec 29 '18 at 9:33
well if it was the case of jQuery not loading up then I might have go terror at
$("#autocomplete") but I am getting error .autocomplete – Ciasto piekarz
Dec 29 '18 at 9:33
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
@Ciastopiekarz Yes, my mistake not noticing that. However, I cannot recreate your issue in CodeSandbox codesandbox.io/s/74wy254mx0. If you can provide more detail of how you implement your Vue component with jQuery UI I might find something.
– blaz
Dec 29 '18 at 9:44
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
thank you @blaz that would be great if you can please have a look I have uploaded my project to codebase
– Ciasto piekarz
Dec 29 '18 at 10:52
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
I was using eonasdan-bootstrap-datetimepicker component that was causing the problems so I got rid of it and used vue-datetime component then after 4 days of hard work, I finally succeeded adding jQuery based autocomplete working perfectly but my form had a second input field that required same feature and i realised even if we have different id setup for two different input field it resets the old one. so I can only use 1 input field with feature of autocomplete.
– Ciasto piekarz
Dec 29 '18 at 17:02
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,
autocomplete is not defined while in my demo it is there.– blaz
Dec 30 '18 at 6:25
@Ciastopiekarz sorry I cannot figure out what is wrong with your code. Even in main.js,
autocomplete is not defined while in my demo it is there.– blaz
Dec 30 '18 at 6:25
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53967042%2fusing-jquery-plugin-in-vue-js-single-file-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
