When rendering rich text with v-html in vue, how to bind events to the rendered child element DOM?

In

vue, v-html is used to render rich text. How to bind events to the rendered child element DOM. The requirement is that there is a picture in the rich text. Click on that one and then pop up a rotation window to display from that one. But after vue mounting, you simply cannot choose to add DOM events to the parent element. You can only start with the first one each time!

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with a picture)
< div class= "content backstagePush" vMuhml = "detail.questionContent" @ click= "showImgSlideTRY (detail.images)" > < / div >

showImgSlide (data) {/ / starting from the first one, the binding event is on the parent element

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

showImgSlideTRY (data) {/ / try

     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;iPP){
          if(imgAttr == imgArr[i]){
            slideNub = i+1;
            console.log(slideNub);
            return;
          }
        }
      });
      this.isShowSwiperImgShow = true; //
      
     }
    this.showImgSlideArr=this.detail.images;//
  },

what result do you expect? What is the error message actually seen?

Jul.06,2021

$('.backstagePush'). On ('click',' img', () = > {}) to do


mounted hook
Please refer to vue's life cycle hook 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', "", () => {
        //
    })
  })
} 
Menu