vue使用v-viewe点击图片不能全部预览

Question

vue使用v-viewe点击图片不能全部预览，使用的是list组件+viewe组件实现图片展示
但是点击图片后只能预览当图片，没办法预览全部图片，导致左右切换图片无法使用，如图，请问此问题该如何处理，是因为和list冲突了吗

Answer 1

首先确定一下点击事件绑定，点击图片的时候触发显示预览的事件，而不是仅仅显示当前图片；
其次需要在点击事件中传递全部图片的数据，以便预览组件知道如何切换到其他图片；

试试这样写：

<template>
  <div>
    <ul>
      <li v-for="(image, index) in images" :key="index">
        <img :src="image.url" @click="openImageViewer(index)" />
      </li>
    </ul>
    <viewer :images="viewerImages" ref="viewer"></viewer>
  </div>
</template>

<script>
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";

export default {
  components: {
    Viewer,
  },
  data() {
    return {
      images: [
        { url: "image1.jpg" },
        { url: "image2.jpg" },
        // ... more images
      ],
      viewerImages: [],
    };
  },
  methods: {
    openImageViewer(index) {
      this.viewerImages = this.images.map((image) => ({ src: image.url }));
      this.$refs.viewer.show(index);
    },
  },
};
</script>