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

在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 QTableWidget重绘程序崩溃
  • ¥15 51寻迹小车定点寻迹
  • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊
  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码,代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含
  • ¥15 麒麟V10桌面版SP1如何配置bonding