uniapp-previewImage循环使用的一个小问题

• previewImage 文档: https://ext.dcloud.net.cn/plugin?id=2416

1. 项目图预览

如下, 是一个新闻列表的形式呈现, 想要达到点击图片,调用 previewImage 来显示的目的.

2. 重点代码预览

如下, 遍历 list 其实 list.images 是一个图片列表
我这里的想法是 @tap="previewOpen($event, index)" 这里把 事件对象和当前是第几项都传过去
PS: 代码已经删除其他不涉及到插件的部分

<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="item.id">
			<view class="content">
				<view class="block-content__images-image" v-for="(img, i) in item.images" :key="i">
					<image :src="img" mode="widthFix" @tap="previewOpen($event, index)" :data-src="img"></image>
				</view>
			</view>
			<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="item.images" @longPress="longPress"></previewImage>
		</view>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	export default {
		components: {
			previewImage
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			previewOpen(e, index) {
				var param = e.currentTarget.dataset.src
				this.$refs.previewImage[index].open(param); // 传入当前选中的图片地址或序号
			},
			
		}
	}
</script>

3. 错误情况

点击第一张图,不会报错,但是往下再选择一个新闻,点击图片,就会出现如下错误.

4. 动图显示

图片过大,请点击下面地址打开.

视频演示

---

5. 把组件放到 v-for的外层

思路如下: 把组件放在外侧

1. 在 data 中增加 imgsarr: []
2. 通过 @tap="previewOpen($event, item.images)" 在点击的时候, 将 item.images图片数组传递给 data 中的 imgsarr
3. 组件传值 <previewImage ref=“previewImage” :opacity=“0.8” :circular=“true” :imgs="imgsarr">
   

<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="item.id">
			<view class="block-content__images">
				<view class="block-content__images-image" v-for="(img, i) in item.images" :key="i">
					<image :src="img" mode="widthFix" @tap="previewOpen($event, item.images)" :data-src="img"></image>
				</view>
			</view>

		</view>
		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgsarr"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	export default {
		components: {
			previewImage
		},
		data() {
			return {
				imgsarr: []
			};
		},
		methods: {
			previewOpen(e, imgsarr) {
				this.imgsarr = imgsarr

				var param = e.currentTarget.dataset.src
				this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号

			}
		}
	}
</script>

2. 问题描述

这次的问题
点击第一次, 报错
点击第二次, 正常
点击第三次, 报错
点击第四次, 报错
以此类推

3. 动图显示

视频演示

4. 自己的猜测: 是不是我组件里面 <previewImage ref=“previewImage” :opacity=“0.8” :circular=“true” :imgs="imgsarr"> 这样写不对呢?