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

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

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

试试这样写：

<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>

你这个 v-viewe 是什么插件库的啊

【相关推荐】

• 文章：vue 渲染的list 数据交换顺序，简单就可以实现动画效果 中也许有你想要的答案，请看下吧
• 除此之外, 这篇博客: Vue项目启动中的 5、在views创建一个List.vue 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

把viewer标签放到a-list外面