记录一下a-image-preview-group 相册模式点击切换相册展示数据，不改变却追加了之前的数据的问题

代码搬运工娃哈哈呀娃哈哈

已于 2023-06-09 17:49:09 修改

阅读量2.3k

点赞数 1

文章标签： javascript vue.js anti-design-vue

于 2023-05-20 10:52:27 首次发布

本文链接：https://blog.csdn.net/weixin_43666952/article/details/130778966

版权

代码段描述了一个在Vue应用中处理图片预览的问题，其中涉及到一个封面图片和一个相册数组。当尝试切换相册数组并预览新数组的图片时，旧的数组信息仍然影响预览。通过在`<a-image-preview-group>`组件上添加条件判断，确保只有当新的相册数组有内容时才显示，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a-image :preview="{ bingdingPicvisible: false }"
                        :src="bingdingPic && bingdingPic.length > 0 ? bingdingPic[0] : '/images/threedimg.png'" alt=""
                        @click="bingdingPicvisible = true" />
                    <div style="display: none">
                        <a-image-preview-group v-if="uploadPic && uploadPic.length > 0"
                            :preview="{ bingdingPicvisible, onVisibleChange: vis => (bingdingPicvisible = vis) }">
                            <a-image v-for="(item, index) in uploadPic" :width="200" :key="index" :src="item" />
                        </a-image-preview-group>
                    </div>

在这段代码中有一个封面，有一个相册数组，官方功能就是点击封面预览相册数组中的图片，在这之外设置了一个切换的按钮清空相册数组重新赋值期望点击之后可以预览的是另外一组数组信息，然而

不管怎样切换之后的相册居然会携带上之前的数组的信息，点击预览就有了问题，解决方法就是在

 <a-image-preview-group v-if="uploadPic && uploadPic.length > 0"

加上判断就可以了，现在就可以正确的变换了！！