En el proyecto vue, el empalme no elimina la posición especificada sino la última

pregunta

Es decir, la selección v-for elimina el elemento especificado de la matriz y el resultado de la eliminación de empalme es siempre el último.

//html
<view class="card ml20 mr20 mt20 c-row">
			
			<view class="flex-cover time-main" v-for="(item,index) in tabbar" :key="index">
				
				<scroll-view class="time-list " scroll-y="">
					<view class="c-row c-column c-row-middle-center">
						<view class="c-row c-row-middle time-item" v-for="(citem,cindex) in item.list" :key="citem">
							
							<view class="del c-row c-row-middle-center" v-if="isEdit" @click="del(index,cindex)">
								-{
   
   {cindex}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

// JS 
/* 删除 */
			del(pindex,index){
			
				this.tabbar[pindex].list.splice(index,1);
			}
/* 添加时间 */
			addTime(index){
				this.tabbar[index].list.push({
					start : '',
					end : '',
				})
			},

Pensé que sería un borrado simple, pero fracasó. En realidad, te voy a hacer una broma. Lo que borra no es el que especificaste, sino siempre el último. Esto es causado por el mecanismo de Vue debido a el problema de vinculación de teclas Solo uso la   siguiente marca para vincular la clave de cada etiqueta, pero no está vinculada a los elementos de la matriz, por lo que al eliminar un elemento de la matriz, vue adoptará un principio llamado 'reutilización en el lugar', y tomar directamente el siguiente elemento para su uso

método

Es fácil saber que el motivo es CLAVE, luego reemplace la CLAVE con una única, que puede ser una marca de tiempo o una ID para garantizar la unicidad.

//html
<view class="card ml20 mr20 mt20 c-row">
			
			<view class="flex-cover time-main" v-for="(item,index) in tabbar" :key="index">

				<scroll-view class="time-list " scroll-y="">
					<view class="c-row c-column c-row-middle-center">
						<view class="c-row c-row-middle time-item" v-for="(citem,cindex) in item.list" :key="citem.id">
							
							<view class="del c-row c-row-middle-center" v-if="isEdit" @click="del(index,cindex)">
								-{
   
   {cindex}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>



// js
/* 添加时间 */
			addTime(index){
				this.tabbar[index].list.push({
					start : '',
					end : '',
					id : this.tabbar[index].list.length + Math.random(),
				})
			},
/* 删除 */
			del(pindex,index){
			
				this.tabbar[pindex].list.splice(index,1);
			}

Supongo que te gusta

Origin blog.csdn.net/qq_37564189/article/details/118415457
Recomendado
Clasificación