vue 中用v-html渲染富文本,如何给渲染出来的子元素DOM绑定事件？

Question

vue 中用v-html渲染富文本,如何给渲染出来的子元素DOM绑定事件,需求是富文本中有图片，点击那张然后弹出一个轮播窗口就从那张开始显示，但是vue 挂载之后根本选不DOM添加事件 在父元素上添加只能每次从第一张开始！

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<div class="content backstagePush" v-html="detail.questionContent" @click="showImgSlideTRY(detail.images)"></div>

showImgSlide(data){ //从第一张开始，绑定事件在父元素上

    if(data==null||data==""){
      this.isShowSwiperImgShow = false;
    }else{
      this.isShowSwiperImgShow = true;
    }
    this.showImgSlideArr=this.detail.images;
  },

showImgSlideTRY(data){ //尝试

     if(data==null||data==""){
       this.isShowSwiperImgShow = false;
     }else{
      let imgArr = data.split(",");
      let slideNub;
      
      $("img").click(function(){
        let imgAttr = $(this).attr("src");
        for(let i=0;i<imgArr.length;i++){
          if(imgAttr == imgArr[i]){
            slideNub = i+1;
            console.log(slideNub);
            return;
          }
        }
      });
      this.isShowSwiperImgShow = true; //控制隐藏轮播显示
      
     }
    this.showImgSlideArr=this.detail.images;//赋值轮播图
  },

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

$('.backstagePush').on('click', 'img', () => {})的方法去做

Answer 2

mounted钩子中
请参考vue的生命周期钩子 mounted
https://cn.vuejs.org/v2/api/i...

mounted: function () {
  this.$nextTick(() => {
    // Code that will run only after the
    // entire view has been rendered
    $(this.$el).on('click', "具体元素", () => {
        //点击某个具体元素要做的事情
    })
  })
}