uniapp使用uview组件的checkbox循环列表操作

最新推荐文章于 2024-08-29 17:43:47 发布

原创最新推荐文章于 2024-08-29 17:43:47 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

uniapp接坑解坑专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在uniapp中使用uview的checkbox组件遇到的问题及其解决方案。通过示例代码展示了如何处理循环列表选中操作，并强调了在子组件中不能直接修改props值，而是采用computed和watch进行数据同步。

在使用uview中checkbox组件循环选中报错。
在这里插入图片描述

话不多说直接上代码==>
在这里插入图片描述

这个这个页面的代码，框起来的是封装了uview的一个checkbox组件

<!--
   mn-checkbox
 -->
<template>
	<view class="cell-check">
		<u-checkbox 
			v-model="checkedData"
			:name="cartId"
			shape="circle"	
			active-color="#DE3221"
			size="30"
			@change="checkItemChange"
		></u-checkbox>
	</view>
</template>

<script>
	export default {
		name:"mn-checkbox",
		props:{
			cartId:{
				type:String,
				default: "",
			},
			isChecked:{
				type:Boolean,
				default:false,
			},
		},
		computed:{
			getIsChecked:{
				get(){
					return this.isChecked;
				},
				set(val) {},
			},
		},
		data() {
			return {
				checkedData:false,
			};
		},
		methods:{
			checkItemChange(e){
				let checkedVal = e.value;	
				this.$emit("checkItemChange",checkedVal,this.cartId);
			},
		},
		watch:{
			getIsChecked:{
				handler(newVal,oldVal){
					this.checkedData = newVal;
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.cell-check{
		width: 40rpx;
		height: 40rpx;
	}

</style>