Is it possible to add hotspots after the vuejs component is loaded

[mlgrozev]

Hi,
I'm trying to add some hotspots after the component is loaded using @panoCreated="panoCreated"
But unfortunately with no success. After using the function above the component is reloaded an all settings that were made are overwritten. Here is my code:

<template>
    <div>

    <a href="#" @click.prevent="addHotspot">ADd</a>
    <krpano :xml="xml" basepath="/assets/krpano/templates/xml/" :initvars="initvars" :consolelog="true"
            :hooks="hooks" :debug="true" :lazy-load="false"
            style="width:100%;height:400px" @panoCreated="panoCreated" @sceneChanged="sceneChanged" @loadSceneData.prevent="loadSceneData"></krpano>
    </div>
</template>

<script>
    export default {
        methods: {
            addHotspot(krpano, hotSpot) {
                krpano = this.krpanoPano

                if (krpano) {
                    var h = krpano.get("view.hlookat");
                    var v = krpano.get("view.vlookat");
                    var hs_name = "hs" + ((Date.now() + Math.random()) | 0);	// create unique/randome name
                    krpano.call("addhotspot(" + hs_name + ")");
                    krpano.set("hotspot[" + hs_name + "].url", "/img/infospot.png");
                    krpano.set("hotspot[" + hs_name + "].ath", h);
                    krpano.set("hotspot[" + hs_name + "].atv", v);
                    krpano.set("hotspot[" + hs_name + "].distorted", true);

                    if (krpano.get("device.html5")) {
                        // for HTML5 it's possible to assign JS functions directly to krpano events
                        krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
                            alert('hotspot "' + hs + '" clicked');

                        }.bind(null, hs_name));
                    }
                    else {
                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
                        krpano.set("hotspot[" + hs_name + "].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
                    }

                }
            },
            loadSceneData() {
              console.log('load scene data')
            },
            panoCreated(pano) {
                this.krpanoPano = pano
                this.krpanoPano.call("lookto(" + (Math.random() * 360.0 - 180.0) + "," + (Math.random() * 180.0 - 90.0) + "," + (80.0 + Math.random() * 100.0) + ")");
                var krpano = this.krpanoPano

                if (krpano) {
                    var h = krpano.get("view.hlookat");
                    var v = krpano.get("view.vlookat");
                    var hs_name = "hs" + ((Date.now() + Math.random()) | 0);	// create unique/randome name
                    krpano.call("addhotspot(" + hs_name + ")");
                    krpano.set("hotspot[" + hs_name + "].url", "/img/infospot.png");
                    krpano.set("hotspot[" + hs_name + "].ath", h);
                    krpano.set("hotspot[" + hs_name + "].atv", v);
                    krpano.set("hotspot[" + hs_name + "].distorted", true);

                    if (krpano.get("device.html5")) {
                        // for HTML5 it's possible to assign JS functions directly to krpano events
                        krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
                            alert('hotspot "' + hs + '" clicked');

                        }.bind(null, hs_name));
                    }
                    else {
                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
                        krpano.set("hotspot[" + hs_name + "].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
                    }
                }
            },
            sceneChanged(scene) {
            }
        },
        mounted() {
            this.addHotspot()
        },
        data() {
            const vm = this;
            return {
                xml: "/uploads/panorama/21/vtour/tour_edit.xml",
                initvars: {
                    krpanoPano: null,
                    basepath: '/public/assets/',
                    hotspots: {
                        hotspot: {
                            id: 0,
                            name: 'hotSpotName',
                            title: 'name',
                            ath: 0,
                            atv: 1,
                            html: '',
                            icon_path: '/img/infospot.png',
                            type: 'info',
                            onclick: "looktohotspot(get(name),90);iframe_open('');",
                            linkedScene: '',
                            scene: 'scene_1'
                        }
                    }
                },
                hooks: {
                    loadSceneData(scene) {
                    },
                    sceneChanged(scene) {
                    }
                }
            }
        }
    }
</script>

[panboren]

es6复习.txt

[shamsulaman786]

hi @mlgrozev ,
if you solved the issue please share it.