vue 自定义组件在遍历中如何传下标给回调函数

在做一个商城项目. 自己写了一个商品数量输入框用来在订单中可以修改商品数量

样式

在这里插入图片描述
在组件里面是通过emit来传值的,当这个商品列表有多个商品的时候. 怎么将商品的下标跟返回过来的数据进行组合呢

父页面调用组件代码

<template>
...
<view class="goodsDetail" v-for="(item, index) in goods">
			<goodsNumberChange
				v-show="numberVisible"
				:number="item.number"
				:min-number="最小购买数量"
				<!-- 主要代码: 取回调的数据 传给 numberEvent函数 并且将当前商品的下标携带  -->
				@update="((event)=>{numberEvent(event, index)})"
				></goodsNumberChange>
				...
</view>
...
</template>
<script>
	import goodsNumberChange from '@/components/goods/goodsNumberChange.vue'
	export default {
		components:{
			goodsNumberChange
		},
		data() {
			return {
				numberVisible:false,
			}
		},
		methods: {
			numberEvent(e, k){
				if(e.number){
					this.goods[k].number = e.number;
				}
				this.numberVisible = false;
			},
		}
	}
</script>



组件代码

<template>
	<view >
		<view class="inputBody" >
			<view class="inputContent">
				<view class="titleText">
					请输入数量
				</view>
				<input class="input"
				v-model="localNumber"
				type="number" />
				<view class="button" @click="submit">
					确定
				</view>
			</view>
		</view>
		<view class="shade" @click="closeFunc">
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"goodsNumberChange",
		props:{
			number:{
				default:1,
			},
			minNumber:{
				default:1,
			}
		},
		mounted() {
			this.localNumber = parseInt(this.number)
		},
		watch:{
			number(val, old){
				this.localNumber = parseInt(val)
			},
		},
		data() {
			return {
				localNumber:1,
			};
		},
		methods:{
			closeFunc(){
				this.$emit("update",{
				})
			},
			submit(){
				if(this.localNumber < 1){
					uni.showToast({
						icon:'none',
						title:'购买数量错误'
					})
					return false;
				}
				if(this.localNumber < this.minNumber){
					uni.showToast({
						icon:'none',
						title:'购买数量必须大于起订量'
					})
					return false;
				}
				this.$emit("update",{
					number: this.localNumber
				})
			}
		}
	}
</script>

<style scoped lang="scss" >
.shade{
	position: fixed;
	top: 0;
	left: 0;
	background-color: #333;
	z-index: 850;
	width: 100%;
	height: 100vh;
	opacity: 0.4;
}
.inputBody{
	position: fixed;
	z-index:999;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20vh;
	top: 0;
	left: 0;
}
.inputContent{
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 20rpx 20rpx ;
	border-radius: 20rpx;
	min-height: 50rpx;
}
.inputContent view{
	text-align: center;
}
.input{
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	text-align: center;
	margin: 20rpx 0;
	border-radius: 10rpx;
}
.titleText{
	font-weight: 800;
	font-size: 32rpx;
}
.button{
	background-color: #FE5455;
	color: white;
	border-radius: 20rpx;
	padding: 5rpx 0;
}
</style>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苏范霖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值