ldc-dam/resources/js/components/OpenSeadragonComponent.vue

<template>
  <div :id="id" :style="nStyle"></div>
</template>

<script>
export default {
  name: "OpenSeadreagonComponent",
  props: {
    id: {
      type: String,
    },
    options: {
      type: Object,
    },
    nStyle: {
      type: String,
    },
  },
  data: function () {
    return {
      viewer: null,
    };
  },
  updated: function () {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
    if (this.id !== "openseadragon_undefined") this.setup();
  },
  watch: {
    options: {
      handler(n, o) {
        // Pour reload la preivew en cas d'upload d'un nouveau média
        this.$forceUpdate();
      },
      deep: true, // Pour checker dans tout l'objet si il y a un changement
    },
  },
  methods: {
    setup: function () {
      if (!this.viewer && this.options) {
        const _options = this.options;
        _options.id = this.id;
        this.viewer = new OpenSeadragon(_options);
      }
    },
  },
};
</script>