search

google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
2k stars 997 forks source link

Hotspots don't render when storing the viewer as a VueJS data #400

Open MTHLily opened 3 years ago

MTHLily commented 3 years ago

I'm currently making an application using Vue.js and Marzipano.

At first, everything seems straightforward. I'm storing the viewer and the scenes as objects inside my data(). But then, when I try to implement hotspots, it's not rendered. No error messages on the console, nothing.

I checked the document tree: the hotspot element is there. If I get rid of a display: none somewhere, I can see it and when I move around, the hotspot moves along fine. It just doesn't render at first.

I try a lot of things, and after a few hours, I did find the thing that did fix it: instead of storing the Viewer as part of the data of the Vue component, I stored it as a regular variable.

Maybe because it wasn't a Proxy object, but this seemed to fix the problem.

Maybe it's because of the virtual DOM thing, but I did create a Viewer with an element both in the virtual DOM and in the actual html file itself, and both worked when it was stored as a regular variable, and broke when it was stored as Vue.js data.

code-savior commented 3 years ago

thank you for your share:)

cybersupernova commented 3 years ago

I'm currently making an application using Vue.js and Marzipano.

At first, everything seems straightforward. I'm storing the viewer and the scenes as objects inside my data(). But then, when I try to implement hotspots, it's not rendered. No error messages on the console, nothing.

I checked the document tree: the hotspot element is there. If I get rid of a display: none somewhere, I can see it and when I move around, the hotspot moves along fine. It just doesn't render at first.

I try a lot of things, and after a few hours, I did find the thing that did fix it: instead of storing the Viewer as part of the data of the Vue component, I stored it as a regular variable.

Maybe because it wasn't a Proxy object, but this seemed to fix the problem.

Maybe it's because of the virtual DOM thing, but I did create a Viewer with an element both in the virtual DOM and in the actual html file itself, and both worked when it was stored as a regular variable, and broke when it was stored as Vue.js data.

Hey, I have also done the same and mine is working. The main component initializes viewer in mounted hook and i save the viewer in this.viewer to use it later.