javascriptvue.jsvue-routeropenseadragon

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".

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"


Solution

  • According to Vue Lifecycle, you should put your function call in mounted.

    Because the element #openseadragon doesn't exists before mounted is called.