vue v-for循环列表点击获取当前项的某一项input的value值

通常在列表中我们要给每一个项填写不同的值，并获取他们的值，在Vue，uniapp，小程序可以用到。

1.以uniapp为例在v-for循环语句上写一个点击事件，传入必要参数像order_id。代码如下

<template>
	<view class="index">
		<view class="new_box" style="margin-bottom: 100upx;">
			<view class="bbox">
				<view class="tile">客户下单列表</view>
				<view class="list-box" v-for="(item,index) in ordeList">
					<view class="list-ed">{{item.name}}</view>
					<view class="list-sal">
						<view class="list-ed">快递公司：<input class="binput"  v-model="item.expressCompany" style="width: 500upx;"/></view>
					</view>
					<view class="list-sal">
						<view class="list-ed">快递单号：<input class="binput"  v-model="item.expressNo" style="width: 500upx;"/></view>
					</view>
					<view class="list-stade" @click="add(item.order_id,index)">去发货</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordeList:[
					{order_id:1,name:'商品1'},
					{order_id:2,name:'商品2'},
					{order_id:3,name:'商品3'},
					{order_id:4,name:'商品4'},
					{order_id:5,name:'商品5'},
				],
				express_no:'',
				express_company:'',
			}
		},
		methods: {
			//将参数穿进方法里
			add(order_id,index) {
				// 获取某一项列表的值
				var express_no = this.ordeList[index].expressNo;
				var express_company = this.ordeList[index].expressCompany;
				// 判断是否填写
				if (express_no == '' || express_no == null || express_no == undefined) {
					alert('请填写物流号');
					return false;
				}
				if (express_company == '' || express_company == null || express_company == undefined) {
					alert('请填写物流公司');
					return false;
				}
				var data = new Object();
				data.express_no = express_no;
				data.express_company = express_company;
				data.order_id = order_id;
				console.log('数据',data);
				//这可以写请求接口，下面是我封装的请求接口，将数据上传
				// this.http('api/order/go_deliver_goods', 'post', {
				// 	data: data}).then(res => {
				// 	if (res.data.code === 1) {
				// 		location.reload();
				// 	}
				// });
			},
		}
	}
</script>

<style>
	page{
		background-color: #F0AD4E;
	}
	.binput{
		padding-left: 10upx;
		border-bottom: 1px solid #656565;
	}
	.tile {
		border-left: 4px solid #ff6000;padding-left: 6upx;font-size: 30upx;margin-bottom: 20upx;margin-top: 20upx;
	}
	.list-box{
		display: flex;flex-direction: column;background-color: #fff;margin:0upx 16upx 16upx 16upx;padding: 16upx;font-size: 26upx;border-radius: 8upx;
	}
	.list-id{
		font-size: 30upx;
	}
	.list-ed{
		display: flex;flex-direction: row;
	}
	.list-stade{
		border: 1px solid #FF6000;padding: 10upx 20upx;color: #FF6000;margin: 40upx auto;border-radius: 6upx;width: 80upx;align-items: center;justify-content: center;display: flex;
	}
	.list-sal{
		display: flex;flex-direction: row;margin-top: 12upx;font-size: 26upx;color: #6D6D6D;
	}
	.list-orange{
		font-size: 28upx;color: #FF6000;
	}
	.list-time{
		font-size: 24upx;color: #6D6D6D;margin-top: 20upx;
	}
</style>

列表的效果图如下

我们把数据填入某一项，就可以获取到列表中的某一项的值了
记录一下方便以后撸码，有啥不明白可以给我留言，我会回复你们的哈。