Как заставить выполниться тег скрипт из API в VUE?

Question

[Андрей Соболев]

У меня есть компонент, который получает контент из API. В контенте может приходить верстка и скрипт с картой из конструктора яндекс.
Например:

<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=cmW8oHaPfpTIUddKnh6jsAZNzv8HxmaT&width=100%&height=450"></script>

По приходу в компоненте весь этот контент рендерится:

<template lang="pug">
div(v-html="сontent")
</template>

Проблема в том, что скрипты которые лежат внутри, а именно яндекс карт даже не запускаются. В блоке Network даже нет запроса на яндекс.
Вот как сделать так, чтобы карты, приходящие из API отрисовывались нормально? Может кто сталкивался с такой проблемой?

Answer 1

[0xD34F]

Суть проблемы, как подсказывает документация:

HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

Так что будем добавлять элемент script вручную. Точнее - заменим тот, что есть, на новый с таким же src.

Добавим ссылку на элемент, в который пишется html:

div(v-html="сontent" ref="content")

Установим наблюдение за свойством, содержащим html-строку:

watch: {
  content() {
    this.$nextTick(() => {
      const oldScript = this.$refs.content.querySelector('script');
      const newScript = document.createElement('script');
      newScript.src = oldScript.src;
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  },
},

https://jsfiddle.net/txk5zjLh/