关于Vue中v-html引用后js代码失效的记录

A_Y_Y_H_A

已于 2022-11-30 16:26:49 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-25 14:08:18 首次发布

本文链接：https://blog.csdn.net/A_Y_Y_H_A/article/details/128036780

版权

在Vue中使用v-html时，js代码不会执行。为了解决这个问题，可以利用Vue的updated()生命周期钩子，在数据变化并完成渲染后执行js。此外，还有第三方库v-append.js可以实现js代码的执行，但可能增加复杂性。另外提到了$nextTick方法，可能也是一个潜在的解决方案，但需进一步研究。

摘要由CSDN通过智能技术生成

关于Vue中v-html引用后js代码失效的记录

据查，v-html的引用在HTML5之后就不再支持js代码。虽然页面上显示已拼接js内容，但不会执行。

解决方法：
将需要执行的js代码放在Vue实例的 updated () { } 函数中，即：

    updated () {
   
		/**
			这里的逻辑是：访问数据库并拿到对应的参数然后赋值给表单，
			从而实现表单数据回显的效果。
			原本是想在被引用的 html 中执行这段逻辑的，
			但 v-html 之后失效，所以就在引用的 html 中 创建 Vue 实例
			然后添加 updated(){} 
		*/

      axios.get("http://localhost:8080/user/UserInfo").