qq_45623125 2023-04-11 16:41 采纳率: 65.5%
浏览 26
已结题

在vue中解析字符串html

在vue中解析字符串html

但是不能使用v-html,因为使用v-html绑定的事件无效

有什么方法可以解析字符串html并事件有效的方法吗

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2023-04-11 17:04
    关注

    参考自 chatGPT:
    可以使用Vue的动态组件来实现解析字符串HTML并使事件有效。
    首先,将字符串HTML转换为Vue组件,可以使用Vue的compile函数来实现:

    import Vue from 'vue'
    function compileTemplate(html) {
      return Vue.compile(`<div>${html}</div>`)
    }
    

    然后,将编译后的Vue组件渲染到动态组件中:

    <template>
      <div>
        <component :is="renderedComponent" @click="handleClick"></component>
      </div>
    </template>
    <script>
    import Vue from 'vue'
    export default {
      props: {
        html: {
          type: String,
          required: true
        }
      },
      data() {
        return {
          compiledTemplate: null,
          renderedComponent: null
        }
      },
      mounted() {
        this.compiledTemplate = compileTemplate(this.html)
        this.renderedComponent = this.compiledTemplate ? Vue.extend(this.compiledTemplate).extendOptions : null
      },
      methods: {
        handleClick(event) {
          // handle click event
        }
      }
    }
    </script>
    

    在上面的代码中,我们将字符串HTML编译为Vue组件,并在组件挂载后将其渲染到动态组件中。同时,我们也可以在动态组件中绑定事件,例如上面的@click事件。
    这样就可以解析字符串HTML并使事件有效了,但是需要注意的是,由于字符串HTML可能包含恶意代码,因此需要对输入进行严格的验证和过滤。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月20日
  • 已采纳回答 4月12日
  • 创建了问题 4月11日

悬赏问题

  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么