vue 通过v-html 渲染出一段富文本，富文本中包含一些@click事件，但是渲染出来的@click事件没办法触发

Question

vue 通过v-html 渲染出一段富文本，富文本中包含一些@click事件，但是渲染出来的@click事件没办法触发，只作为字符串解析出来

<template>
<div class="editecontent">

<p>{{editeText}}</p>
<div class="editeshow">
  <draggable v-model="editlist" class="draggshow" :options="{group:'people'}">
    <!--在这里渲染富文本-->
    <div v-for="(element,index) in editlist" :key="index" @click="edite(index,element.tpl)" v-html="element.tpl" :class="{active:active==index}"></div>
  </draggable>
</div>
</div>

</div>
</template>

<script>
import draggable from 'vuedraggable'
export default {

name: 'editecontent',
data(){
    return{
      editlist:[],
      active: 0,
    }
},
props:["editeText"],
components:{
  draggable
},
methods:{
  //点击事件
  edite:function(i,text){
    this.active = i;                  //添加点击样式
    this.$emit('passData', text);     //往父组件传值
  },
},
edite_text:function(){                //富文本中的文本点击事件
  alert("1");
},
edite_border:function(){              //富文本中的线点击事件
    alert("1");
}

}
</script>

Answer 1

无法触发是必然的，v-html只是用来插入一段浏览器可以识别的文本，vue不会再去compiler一遍，也就是说数据绑定和事件绑定是不起作用的。

Raw-HTML

Answer 2

遇到相同问题，应该如何解决呢？