v-html 点击事件不生效解决办法

最新推荐文章于 2024-06-14 11:31:16 发布

原创最新推荐文章于 2024-06-14 11:31:16 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决Vue中从后台获取的字符串含有@click事件但不触发的问题。通过使用组件渲染而非v-html，确保了事件能正确响应。具体实现涉及Vue组件、字符串方法和事件绑定。

保姆级教程

从后台获取的字符串中含有@click事件，而鼠标点进去却不生效，解决办法就是使用组件渲染而不是v-html。具体代码如下：

<template>
  <div>
<!--  props中的字符串 从后台获取到的 传给子组件 -->
    <article :html="matchcontent"></article>
  </div>

</template>
<script>
  import {getArticle} from '****'
  export default {
    components: {
      'article':{//用来解析html片段
        props:{
          html:String
        },
        render(h){
          const com=Vue.extend({
            template:`<div>${this.html}</div>`
          });
          return h(com,{});
        }
      }
    },
    data(){
      return {
        matchcontent:'',
      }
    },
    created() {
      window.getRuleInfo = this.getRuleInfo;//字符串中的方法 这样写就可以获取到
      this.getHtml();
    },
    methods:{
      getHtml(){//获取html片段
        getArticle().then(res=>{//后台接口
          this.matchcontent=res.data.data;
        })
      },
      getRuleInfo(obj){//点击字符串中的方法
        console.log(obj)
      },
      
    }
  }
</script>