如何在Vue组件

时间:2018-04-24 12:41:01

标签: javascript vue.js vue-router openseadragon

我必须在我的Vue组件中使用外部JavaScript库,名为" OpenSeadragon"。

但是如何在我的Vue组件中加载此组件? 在我的父模板中,我使用以下命令加载库:

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

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

然后我收到此错误:

  

[Vue警告]:创建的钩子出错:&#34; TypeError:无法读取属性&#39; appendChild&#39; of null&#34;

1 个答案:

答案 0 :(得分:3)

根据Vue Lifecycle,您应该将函数调用放在mounted

因为在调用#openseadragon之前元素mounted不存在。