建一个项目把上面的代码放进去运行
2***@qq.com
- 发布：2021-07-17 10:57
- 更新：2021-07-19 11:18
- 阅读：392
产品分类： uniapp/小程序/阿里
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 11.4
HBuilderX类型： 正式
HBuilderX版本号： 3.1.22
第三方开发者工具版本号： 2.0.0
基础库版本号： 不知道
项目创建方式： HBuilderX
操作步骤：
预期结果：
点击checkbox会改变颜色
点击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>
FirstUI
不行，看看是不是和这个bug一致没修复：https://ask.dcloud.net.cn/question/111502
2021-08-27 18:14