How to include external JavaScript library properly so that its class is avialable in VueJs component?
Question
Below is the link to the JavaScript library.
https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js
By including this library in the view as following, my VueJs component can just utilizes its d3 class and any methods inside that class.
<html>
<body>
<div class="my-div-class"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<script src="{{ url (mix('/js/my-vuejs-component.js')) }}" type="text/javascript"></script>
</body>
</html>
Calling d3 class and its select() method in VueJsComponent, "my-vuejs-component.js":
const el = d3.select('.my-div-class');
It works fine, but my VueJsComponent complains that d3 is not defined. It makes sense because d3 has never been defined in VueJeComponent.
How to include external JavaScript library properly so that its class or methods are available in VueJs component?
Something like this would be great if we can make it possible in VueJsComponent:
<script>
// This line of code is not working, just give an idea if we can convert this library into a module and import its class inside VueJs component.
import d3 from "https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js";
export default {
methods: {
test() {
const el = d3.select(".my-div-class");
}
}
}
</script>
To be specific, I am working with Laravel 6.
1 answers
solution1
0 2019-11-20 08:29:47
Could you try to add the script below?
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js';
document.body.appendChild(script);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.