Выполнить скрипт из простого HTML в vue

Question

Я получаю простой HTML виджет, который содержит теги сценария из удаленного API в хранилище vuex. Для правильной визуализации этого виджета необходимо выполнить скрипты. Внутри vue компонента я делаю это так:

<div v-html="widget" id="widget-container"></div>


computed: mapGetters(["widget"]), // getter returns string of plain HTML
    methods: {
        renderWidget () {
            let container = document.getElementById("widget-container")
            let scriptsTags = container.getElementsByTagName("script")
                for (let i = 0; i < scriptsTags.length; i++) {
                    let parentNode = scriptsTags[i].parentNode
                    let newScriptTag = document.createElement("script")
                    newScriptTag.type = "text/javascript"
                    newScriptTag.text = scriptsTags[i].text
                    parentNode.removeChild(scriptsTags[i])
                    parentNode.appendChild(newScriptTag)
                }
            },
        }

Это прекрасно работает, если я назначу этот метод событию нажатия кнопки или еще, но не на

mounted () { 
    this.renderWidget()
}

ловушке , Ничего не происходит.

Так как мне выполнять скрипты после извлечения?

Answer 1

widget значение недоступно при монтировании. Выполнение сценария может быть запущено, когда виджет уже доступен в DOM, либо с помощью наблюдателя, либо с помощью updated hook:

  watch: {
    widget(widgetHtml) {
      if (!widgetHtml)
        return;

      this.$nextTick(this.renderWidget);
    }
  }

Обратите внимание, что таким образом сценарии могут оцениваться несколько раз.