how to use in vue
velvetflame opened this issue · 1 comments
velvetflame commented
i added script tag with CDN link in index.html, but the code in vue templete didn't render functional. Is any idea how to import this js properly?
index.html
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
myVueComponent.vue
<div
id="gurkha-suv"
class="cloudimage-360"
data-amount-x="73"
data-filename-x="orange-{index}.jpg"
data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
></div>
velvetflame commented
problem solved by useing mounted block, special thanks to qiqqq provided solution .
import in vue component (share from stackoverflow)
<script>
export default {
name: "yourComponent",
mounted() {
const scriptEl = document.createElement("script");
scriptEl.setAttribute(
"src",
"https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"
);
scriptEl.async = true;
document.head.appendChild(scriptEl);
}
}
</script>