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

最新推荐文章于 2025-01-18 22:00:00 发布

苏范霖

最新推荐文章于 2025-01-18 22:00:00 发布

阅读量159

点赞数 4

文章标签： vue.js 前端 uniapp

本文链接：https://blog.csdn.net/qq_38247491/article/details/140875833

版权

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

样式

在这里插入图片描述
在组件里面是通过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>