javascript - 如何在Vue组件中加载OpenSeadragon组件

我必须在我的VUE组件中使用一个外部的JavaScript库，名为“OpenSeadragon”。
但是如何在vue组件中加载此组件？
在父模板中，我加载库时使用：

<script src="{{ asset('js/openseadragon.min.js') }}"></script>

这是我的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>

然后我得到这个错误：
[Vue warn]：创建的挂钩中有错误：“typeerror:无法读取null的属性'appendchild'”

最佳答案

根据Vue Lifecycle，您应该将函数调用放入mounted。
因为元素#openseadragon在调用mounted之前不存在。