I have to use an external javascript library in my Vue Component, named "OpenSeadragon
".
But how can I load this component in my Vue component? In my parent template I load the library with:
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
This is my Vue TestComponent:
<template>
<div>
<div id="openseadragon" style="width: 100%; height: 600px; border: 1px solid red"></div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
created() {
// How can I load openseadragon??
OpenSeadragon({
id: "openseadragon",
prefixUrl: "/openseadragon/images/",
tileSources: "/example-images/duomo/duomo.dzi"
});
},
methods: {
//
}
}
</script>
Then I get this error:
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'appendChild' of null"
According to Vue Lifecycle, you should put your function call in mounted
.
Because the element #openseadragon
doesn't exists before mounted
is called.