Vue使用v-html展示后端返回的html内容

使用v-html展示后端返回的html内容，并解决js不执行问题

在UI平台开发的过程中，因为测试报告是在后台生成的，需要将测试报告整个进行返回到前端进行展示，但是vue不能像原生html一样直接展示render返回的响应页面，所以笔者借助v-html进行展示。具体写法如下：

<div ref="reportHTML" v-html="htmlText" class="web-con"></div>

<script>
	data(){
		return{
			htmlText: ""
		}
	}
	methods:{
		lookReport(report_case){
    		...
            this.htmlText = response.data
            ...
    },
	}
</script>

• 这种方式能够将测试报告页面正常展示出来，但是页面上的按钮全部都点不动，后面发现这种方式只支持html渲染，而js脚本内容则未被执行。所以还要解决js脚本无法被渲染的问题。后面参考了下面这篇文章，发现可以动态的将js脚本插入到标签中，这样子就解决了v-html中js脚本不生效的问题。
  https://blog.csdn.net/qq_38387487/article/details/88017215
  具体用法如下：

// 使用正则获取js内容
   response.data.replace(/<script.*?>([\s\S]+?)<\/script>/img,function(_,js){    //正则匹配出script中的内容
    	JSScript = js
   })
   // 这里需要使用$nextTick  需要等dom更新后才能操作reportHTML
   this.$nextTick(() => {
	   // 将js脚本内容插入到标签当中
	    var newElement = document.createElement("script")
	    newElement.innerHTML = JSScript
	    this.$refs.reportHTML.append(newElement)
  })