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

У меня есть компонент, который получает контент из 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 отрисовывались нормально? Может кто сталкивался с такой проблемой?
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Суть проблемы, как подсказывает документация:

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/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы