v-for嵌套双层循环 ---index取值(代码)

HTML

//第一层循环---------------------------------------------
//------------------------------------------------------
<view style="border-bottom: 1px solid #eee;" v-for=" (item,index) in zxhInfo" :key="index">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-titles text-orange "></text>货物信息
					</view>
					<view class="action">
						<button class="cu-btn round sm bg-blue" v-if="index > 0" :data-id="index" @click="delGoods(index)">删除</button>
					</view>
				</view>
				<!-- 货物信息 -->
				//第二层循环-------------------------------------------------------
				//----------------------------------------------------------------
				<view class="" v-for="(item2,index2) in item.goodList" :key="index2">
					<view class="cu-form-group" @click="selectGood(index2,index)" style="border-top: none">
						<view class="title">机型:</view>
						<view class="indexList" style="margin-right: 36px;">
							<view class="indexList_content">
								{{item2.goodModel}}
							</view>
						</view>
							<!-- <uni-number-box :value='item.number' :index="index" @change="numChange"></uni-number-box>-->
					</view>
					<view class="cu-form-group" style="border-top: none">
						<view class="title">机号:</view>
						<input v-model='item2.goodNo' placeholder="请输入机号" name="input"></input>
					</view>
					<view class="flex solid-bottom padding justify-center bg-white" v-if="index2 == 0" style="border-bottom: 1rpx solid #F1F1F1">
						<view class="cuIcon-roundaddfill text-blue" @click="addGoods(index,index2)">添加货物</view>
					</view>
					<view class="flex solid-bottom padding justify-center bg-white" v-if="index2 > 0" style="border-bottom: 1rpx solid #F1F1F1">
						<view class="cuIcon-roundclosefill text-blue" @click="del(index,index2)" >删除货物</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">装货点:</view>
					<picker class="picker" mode="selector" :value="zxhInfo[index].startGpsIndex" :range="gpsList" range-key="addressName" @change="bindStartGpsPickerChange($event,index)">
						<view class="picker">
							{{zxhInfo[index].startGpsIndex>-1?gpsList[zxhInfo[index].startGpsIndex].addressName:'请选择装货点'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group" >
					<view class="title">卸货点:</view>
					<picker class="picker" mode="selector" :value="zxhInfo[index].endGpsIndex" :range="gpsList" range-key="addressName" @change="bindEndGpsPickerChange($event,index)">
						<view class="picker">
							{{zxhInfo[index].endGpsIndex>-1?gpsList[zxhInfo[index].endGpsIndex].addressName:'请选择卸货点'}}
						</view>
					</picker>
				</view>
			</view>

JS

addGoods(index,index2) {
				this.zxhInfo[index].goodList.push({
					"goodId": 0,
					"goodModel": "请选择机型",
					"goodNo": ""
				})
			},
			del(index,index2) {
				this.zxhInfo[index].goodList.splice(index2,1)
			},
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值