vant组件ImagePreview动态渲染v-html里的图片不显示bug

问题描述：

对元素v-html的内容中图片实现点击放大预览，因为我做的是移动端项目，所以使用的ui框架是vant，用到了图片预览组件ImagePreview，
因为是通过v-html绑定的数据，获取图片的src需要绑定监听事件，ImagePreview有两种使用方法：组件调用和函数调用，起初我使用的是函数调用，组件结构如下：

<template>
   <div class="content" v-html="detailData.content" @click="handlePreview($event)"></div>
</template>

export default {
  name: "detail",
  data() {
    return {
      detailData: ""
    };
  },
  methods: {
    //图片放大预览
    handlePreview() {
      if (event.target.nodeName === "IMG") {
        ImagePreview({
          images: [event.target.src],
          closeable: true //是否显示关闭按钮
        });
      }
    }
  }
};
</script>

这种写法通过PC端在chrome浏览器的手机模式下查看显示正常，但是在移动端的浏览器测试只有第一次点击的图片能正常显示，后面的图片点击后不能正常显示，当前页面刷新后又都可以显示：

第一个疑虑认为数组更改而未触发视图更新，便用数组的$set方法：

    handlePreview(event) {
      if (event.target.nodeName === "IMG") {
        this.$set(this.imgSrc, 0, event.target.src);
        ImagePreview({
          images: this.imgSrc,
          closeable: true //是否显示关闭按钮
        });
      }
    },

但是问题仍未解决，分析可能是数据动态加载完了而dom还没有更新完毕，便使用了ImagePreview组件调用模式，此时问题完美解决。

解决方法：使用组件调用模式并加上v-if判断

如有不足之处，欢迎指正，最终代码如下：

<template>
  <div>
    <div
      class="content"
      v-html="detailData.content"
      @click="handlePreview($event)"
    ></div>
    <van-image-preview
      v-if="imgShow"
      v-model="imgShow"
      :images="imgSrc"
      :show-index="false"
      :closeable="true"
      @closed="handleClose"
    >
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      detailData: "",
      imgSrc: [], //预览的图片src数组
      imgShow: false //组件显示与否
    };
  },
  created() {
    this.getNewsDetail();
  },
  methods: {
    //点击放大预览图片
    handlePreview(event) {
      if (event.target.nodeName === "IMG") {
        this.imgSrc[0] = event.target.src;
        this.imgShow = true;
      }
    },
    //关闭预览
    handleClose() {
      this.imgSrc = [];
      this.imgShow = false;
    },
    //获取详情数据
    getNewsDetail() {
      newsDetail().then(res => {
        this.detailData = res.msg;
      });
    }
  }
};
</script>