2***@qq.com
2***@qq.com
  • 发布:2021-07-17 10:57
  • 更新:2021-07-19 11:18
  • 阅读:323

【报Bug】渲染一个列表数据时,使用函数处理渲染列表元素的一个属性,会使元素的其他属性v-model失效

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.4

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

第三方开发者工具版本号: 2.0.0

基础库版本号: 不知道

项目创建方式: HBuilderX

操作步骤:

建一个项目把上面的代码放进去运行

预期结果:

点击checkbox会改变颜色

实际结果:

没有反应,初始状态也没渲染

bug描述:

渲染一个列表数据时,使用函数处理渲染列表元素的一个属性,会使元素的其他属性v-model失效。
在阿里小程序和微信小程序试了都有这个bug,h5没有。

<template>  
	<view>  
		<view  
			v-for="(item, index) in list"  
			:key="index"  
			style="display: flex;margin: 30px;"  
		>  
			<my-checkbox v-model="item.switch1"></my-checkbox>  
			<my-checkbox v-model="item.switch2"></my-checkbox>  
			  
			<!-- 直接渲染没问题 -->  
			<!-- {{ item.text }} -->  
			  
			<!-- 使用函数渲染会使上面两个组件的v-model绑定失效 -->  
			{{ renderText(item.text) }}  
		</view>  
	</view>  
</template>  
  
<script>  
import MyCheckbox from '../../c/my-checkbox.vue';  
  
export default {  
	name: 'index',  
	components: {  
		MyCheckbox  
	},  
	data() {  
		return {  
			list: [  
				{  
					switch1: false,  
					switch2: true,  
					text: 'hello world1'  
				},  
				{  
					switch1: false,  
					switch2: true,  
					text: 'hello world2'  
				}  
			]  
		};  
	},  
	onLoad() {},  
	methods: {  
		renderText(text) {  
			return text || '';  
		}  
	}  
};  
</script>  

my-checkbox.vue

<template>  
	<view  
		style="width: 30px;height: 30px;border-radius: 20px;"  
		:style="{  
			backgroundColor: value ? 'red' : 'gray'  
		}"  
		@click="$emit('input', !value)"  
	></view>  
</template>  
  
<script>  
export default {  
	name: 'my-checkbox',  
	props: {  
		value: {  
			type: Boolean,  
			default: false  
		}  
	},  
	model: {  
		prop: 'value',  
		event: 'input'  
	}  
};  
</script>  

2021-07-17 10:57 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

scopedSlotsCompiler 尝试切换为 legacy 或者 augmented 试试

https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin

  • FirstUI

    不行,看看是不是和这个bug一致没修复:https://ask.dcloud.net.cn/question/111502


    2021-08-27 18:14

该问题目前已经被锁定, 无法添加新回复