javascript - 在 vue 中从纯 HTML 执行脚本

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()
}

钩子(Hook)。什么也没发生。

那么获取后应该如何执行脚本呢？

Answer 1

widget 值在装载时不可用。当 DOM 中已有一个小部件可用时，可以使用观察者或 updated 钩子(Hook)触发脚本执行:

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

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

请注意，这样脚本可以被多次评估。