<v-for="(itemState,index) in goodsCheck" :key="index" >
<view @click.stop="goCheck(itemState)">
<image v-show="itemState.checkMask" src="../../static/user/CheckGoods.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
<image v-show="!itemState.checkMask" src="../../static/user/unCheckGoods.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
</view>
</view>
goCheck(item){
item.checkMask = !item.checkMask;
console.log(item.checkMask)
}
- 发布:2021-01-22 15:49
- 更新:2021-01-22 16:01
- 阅读:756
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 17763.1518
HBuilderX类型: 正式
HBuilderX版本号: 3.0.5
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: 华为nove
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,结果 state 状态改变 视图里 state 一直是初始状态
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,结果 state 状态改变 视图里 state 一直是初始状态
预期结果:
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,state 状态改变 视图里 state 状态也改变
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,state 状态改变 视图里 state 状态也改变
实际结果:
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,结果 state 状态改变 视图里 state 一直是初始状态
循环一个数组 数据 item.state 的true 和false 改变 通过不同图片来显示选中和未选中,结果 state 状态改变 视图里 state 一直是初始状态
bug描述:
一个简单的选中和未选中 循环一个数组,点击后 item.state = !item.state 打印item.state 状态变化 false - true - false
视图未渲染 (之前做过多次未发现问题这次不知道为什么)
1 个回复
香草
如果原来数组对象上没有state属性,要用this.$set,这是VUE的知识