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;">
·
通常在列表中我们要给每一个项填写不同的值,并获取他们的值,在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>
列表的效果图如下
我们把数据填入某一项,就可以获取到列表中的某一项的值了
记录一下方便以后撸码,有啥不明白可以给我留言,我会回复你们的哈。
更多推荐
已为社区贡献3条内容
所有评论(0)