[英]How can I load an OpenSeadragon component in my Vue Component
I have to use an external javascript library in my Vue Component, named " OpenSeadragon
".我必须在我的 Vue 组件中使用一个名为“
OpenSeadragon
”的外部 javascript 库。
But how can I load this component in my Vue component?但是如何在我的 Vue 组件中加载这个组件呢? In my parent template I load the library with:
在我的父模板中,我加载库:
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
This is my Vue TestComponent :这是我的Vue 测试组件:
<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"
[Vue 警告]:创建钩子时出错:“TypeError:无法读取属性‘appendChild’ of null”
According to Vue Lifecycle , you should put your function call in mounted
.根据Vue Lifecycle ,你应该把你的函数调用
mounted
。
Because the element #openseadragon
doesn't exists before mounted
is called.因为在调用
mounted
之前元素#openseadragon
不存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.