关于uview u-upload组件循环的之后删除的问题

<view class="w-100 bg-min major-item">
					<view class="over-title font-sizt-32 clr-min  space-between">
						<view class="font-weight-bold">就业风采</view>
						<view class="font-sizt-24 clr-theme" @click="addCultureImgClick">添加</view>
					</view>
					<view class="culture-img" v-for="(item,index) in cultureList" :key="index">
						<view class="culture-img-fill space-between">
							<input type="text" v-model="item.text" placeholder="请输入公司名称" placeholder-class="phColor">
							<view class="w-s-color" @click="deleteOpetionClick(index)" v-if="index!==0">删除</view>
						</view>
						<u-upload :ref="item.ref" :action="action" maxCount="6" name="iFile" :header="header"
							iconName="camera">
						</u-upload>
					</view>
				</view>

data(){
  return{
   cultureList: [{
					ref: `cultureRef`,
					text: "",
				}],
      }
}

methods: {
			// 添加就业风采
			addCultureImgClick() {
				this.cultureList.push({
					ref: `cultureRef${this.imgIndex++}`,
					text: ""
				})
			},
			// 删除添加的某一项
			deleteOpetionClick(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该项',
					success: (res) => {
						if (res.confirm) {
							this.cultureList.splice(index, 1)
						}
					}
				})
			},
		}

 添加和上传都为正常

 删除第二项结果发现第二项确实不存在了，但是第二项的照片跑到第三项去了，第三项的照片跑到第四项去了，第四项的照片不见了

后面经过大佬的指点  将绑定的key不要用index就好了

（注意：设计数组渲染dom的可进行添加和删除的情况，一定不要直接绑定index，最好以后所有根据数组渲染dom的情况也不要用index进行绑定）