添加多个行程, 无论在哪个行程上修改时间, 时间总是只显示在最后一个行程里

错误代码:

<div class="journey">
						<div
							v-for="(item, index) in ruleform.hrms_business_item"
							:key="index">
							<div class="journey-title">
								<span>{{ "行程" + (index + 1) }}</span>
								<van-icon
									name="delete-o"
									size="18"
									color="#323233"
									@click="deltrip($event, index)" />
							</div>
							<van-cell-group inset class="cell journey-toptime">
								<van-field
									class="dispensable"
									v-model="item.startDate"
									label="开始时间"
									placeholder="请选择"
									label-align="top"
									is-link
									name="picker"
									@click="pickerData.showPickerstartDate = true" /><!--主要问题就是 pickerData.showPickerstartDate 控制了组件是否弹出-->
								<timepicker
									:values="item.startDate"
									@changeValue="pickerData.showPickerstartDate = false"
									:showPicker="pickerData.showPickerstartDate"
									@click="onConClick($event, 'startDate', index)"
									@confirm="onConfirmHHMMSS($event, 'startDate', index)"
									@cancelOn="pickerData.showPickerstartDate = false" />

								<van-field
									class="dispensable"
									v-model="item.endDate"
									label="结束时间"
									placeholder="请选择"
									label-align="top"
									is-link
									name="picker"
									@click="pickerData.showPickerendDate = true" />
								<timepicker
									:values="item.endDate"
									@changeValue="pickerData.showPickerendDate = false"
									:showPicker="pickerData.showPickerendDate"
									@confirm="onConfirmHHMMSS($event, 'endDate', index)"
									@cancelOn="pickerData.showPickerendDate = false" />
								<van-field
									class="dispensable"
									v-model="item.note"
									label="备注"
									placeholder="请输入"
									label-align="top"
									type="textarea"
									:autosize="{ maxHeight: 30 }" />
							</van-cell-group>
						</div>
						<div class="journey-plus" @click="addtrip">
							<van-icon name="plus" color="#4B6EF6" />
							<span>添加行程</span>
						</div>
					</div>

主要问题就是 pickerData.showPickerstartDate 控制了组件是否弹出, 讲道理在for循环当中, 利用外部字段控制弹窗是否弹出, 并传递对应下标, 应该是可以正常传递的, 但是这里不行, 必须用item.showPickerstartDate控制弹窗是否打卡关闭.

正确代码:

<div class="journey">
						<div
							v-for="(item, index) in ruleform.hrms_business_item"
							:key="index">
							<div class="journey-title">
								<span>{{ "行程" + (index + 1) }}</span>
								<van-icon
									name="delete-o"
									size="18"
									color="#323233"
									@click="deltrip($event, index)" />
							</div>
							<van-cell-group inset class="cell journey-toptime">
								<van-field
									class="dispensable"
									v-model="item.startDate"
									label="开始时间"
									placeholder="请选择"
									label-align="top"
									is-link
									name="picker"
									@click="item.showPickerstartDate = true" />
								<timepicker
									:values="item.startDate"
									@changeValue="item.showPickerstartDate = false"
									:showPicker="item.showPickerstartDate"
									@click="onConClick($event, 'startDate', index)"
									@confirm="onConfirmHHMMSS($event, 'startDate', index)"
									@cancelOn="item.showPickerstartDate = false" />

								<van-field
									class="dispensable"
									v-model="item.endDate"
									label="结束时间"
									placeholder="请选择"
									label-align="top"
									is-link
									name="picker"
									@click="item.showPickerendDate = true" />
								<timepicker
									:values="item.endDate"
									@changeValue="item.showPickerendDate = false"
									:showPicker="item.showPickerendDate"
									@confirm="onConfirmHHMMSS($event, 'endDate', index)"
									@cancelOn="item.showPickerendDate = false" />
								<van-field
									class="dispensable"
									v-model="item.note"
									label="备注"
									placeholder="请输入"
									label-align="top"
									type="textarea"
									:autosize="{ maxHeight: 30 }" />
							</van-cell-group>
						</div>
						<div class="journey-plus" @click="addtrip">
							<van-icon name="plus" color="#4B6EF6" />
							<span>添加行程</span>
						</div>
					</div>

修改后即可正常回显数据