Вставьте код javascript для адаптивного iframe в Vue.js

Если вы посмотрите на предоставленный JavaScript, то на самом деле ничего особенного. Он устанавливает начальную высоту, а затем настраивает прослушиватель событий для управления высотой iframe.

Для начала мы привяжем height к свойству данных iframeHeight.

<iframe
  ref = "chartiframe"
  id = "datawrapper-chart-8dfPN" 
  src = "//datawrapper.dwcdn.net/8dfPN/4/"
  scrolling = "no"
  frameborder = "0"
  allowtransparency = "true"
  style = "width: 0; min-width: 100% !important;"
  :height = "iframeHeight"></iframe>

потом

1. Создайте переменную const для embeddedDeltas
2. Установите начальную высоту крюка mounted.
3. Настройте прослушиватель событий message в ловушке mounted
4. Создайте метод для обработки изменения размера
5. Удалите прослушиватель событий в перехватчике beforeDestroy

ддд

const DELTAS = {
        "100":481,
        "200":427,
        "300":400,
        "400":400,
        "500":400,
        "700":400,
        "800":400,
        "900":400,
        "1000":400,
};

export default {
  data() {
    return {
      iframeHeight: '0px', // initial height
    };
  },
  computed: {
    // Necessary for initial iframe height
    iframeOffsetWidth() {      
      return this.$refs['chartiframe'].offsetWidth;
    },
  },
  mounted() {
    // set initial iframe height
    this.iframeHeight = `{DELTAS[Math.min(1e3,Math.max(100*Math.floor(this.iframeOffsetWidth/100),100))]}px`;
    // setup event listener
    window.addEventListener('message', this.handleIframeResize);
  },
  beforeDestroy() {
    // destroy event listener
    window.removeEventListener('message', this.handleIframeResize);
  },
  methods: {
    handleIframeResize(e) {
      for(var b in e.data['datawrapper-height']) {
        if ('8dfPN' === b) {
          this.iframeHeight = `${e.data['datawrapper-height'][b]}px`;
        }
      }
    },
  },
};