admin管理员组文章数量:1336179
How can I load a JavaScript script dynamically in a Vue.js app?
Here's a naive solution:
<script async v-bind:src="srcUrl"></script>
<!--<script async src=".js?cx=007968012720720263530:10z7awj2l37"></script>-->
But the first line doesn't load the script (it does not event add the script element to HTML).
The second line works. The second line is identical, just the app variable is replaced with plain text (srcUrl => .js?cx=007968012720720263530:10z7awj2l37).
Where's my mistake?
The full demo for reference (it is supposed to load a Google Custom Search Engine on a blank page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/[email protected]"></script>
</head>
<body>
<div id="load-script">
<div>{{ srcUrl }}</div>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<script async v-bind:src="srcUrl"></script>
<!--<script async src=".js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
new Vue({
el: '#load-script',
data: {
srcUrl: ".js?cx=007968012720720263530:10z7awj2l37"
}
});
</script>
</body>
</html>
I found related questions but they don't seem to describe this situation exactly:
- Why is the vue <template> invalid with v-bind:src?
- JavaScript load script dynamically inside a DIV
- How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2
- How to use img src in vue.js?
How can I load a JavaScript script dynamically in a Vue.js app?
Here's a naive solution:
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
But the first line doesn't load the script (it does not event add the script element to HTML).
The second line works. The second line is identical, just the app variable is replaced with plain text (srcUrl => https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37).
Where's my mistake?
The full demo for reference (it is supposed to load a Google Custom Search Engine on a blank page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr/npm/[email protected]"></script>
</head>
<body>
<div id="load-script">
<div>{{ srcUrl }}</div>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
new Vue({
el: '#load-script',
data: {
srcUrl: "https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37"
}
});
</script>
</body>
</html>
I found related questions but they don't seem to describe this situation exactly:
- Why is the vue <template> invalid with v-bind:src?
- JavaScript load script dynamically inside a DIV
- How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2
- How to use img src in vue.js?
- Have you tried my answer below? – terrymorse Commented May 27, 2020 at 16:24
- @terrymorse I did, Terry. Let's wait a bit if anyone would suggest a native Vue.js solution with binding. When the script depends on user actions, appending and removing it dynamically is something Vue.js might take care of. – Anton Tarasenko Commented May 28, 2020 at 11:48
1 Answer
Reset to default 6You can add a <script> element dynamically to the DOM at any time.
If you're using Vue, you can use its mounted property to add a script to the load-script div when the page is loaded:
Vue({
mounted: function () {
let divScripts = document.getElementById('load-script');
let newScript = document.createElement('script');
newScript.src = 'https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37';
divScripts.appendChild(newScript);
}
});
Alternate Method — Use LoadScript
As an alternative to adding a function to the mounted Vue property, there is a simple Vue plug-in named LoadScript that loads and unloads scripts.
import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);
To load a script:
Vue.loadScript('https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37')
.then(() => {
// do something after script loads
})
.catch(() => {
// do something if load fails
});
To unload a script:
Vue.unloadScript('https://cse.google./cse.js?cx=007968012720720263530:10z7awj2l37')
.then(() => {
// do something after script unloads
})
.catch(() => {
// do something if unload fails
});
本文标签： htmlLoading a JavaScript script dynamically in a Vuejs appStack Overflow
版权声明：本文标题：html - Loading a JavaScript script dynamically in a Vue.js app - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742402197a2468109.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论