执行了bindtap的onClickPowerInfo后,将showItem变成了!showItem,
是想页面的wx:if要重新判断,然后刷新显示不同的内容才是,
但是并不会自动刷新,只能重新编译才会显示!showItem的内容,请问为什么会这样呢?
onClickPowerInfo(e) {
const index = e.currentTarget.dataset.index
const getLimit1 = this.data.getLimit1
getLimit1[index].showItem = !getLimit1[index].showItem
this.setData({
getLimit1
})
const docc=getLimit1[index]._id
db.collection("project").where({
_id:docc
}).update({
data:{
showItem:getLimit1[index].showItem
},
})
},
<view class="container">
<view wx:for="{{list}}">
<view class="power" wx:for-items="{{item.data}}">
<view class="power_info" data-index="{{index}}" bindtap="onClickPowerInfo">
<!-- 显示列表主题 -->
<view class="power_info_text">
<view class="power_info_text_title">{{item.project}}</view>
<view class="power_info_text_tip">{{item.hight}}</view>
</view>
<!-- 显示列表箭头图标 -->
<image wx:if="{{!item.showItem}}" class="power_info_more" src="../../images/arrow.svg"></image>
<image wx:if="{{item.showItem}}" class="power_info_less" src="../../images/arrow.svg"></image>
</view>
<view wx:if="{{item.showItem}}">
<view class="power_item_title">{{item.project}}</view>
<view class="power_item">
<view class="power_item_title" bindtap="viewProject">
{{item._id}}
{{item.width}}
{{item.hight}}
</view>
</view>
</view>
</view>
</view>
</view>
js的代码有点臃肿,是因为我想试下更改数据库的showItem,但结果还是不行。麻烦大 佬帮我看看,感谢感谢
代码有问题,wxml遍历的是list数组项中的data数组,题主js代码中更改的是getLimit1数据,不是wxml中的data数据项当然不会更新了。之所以重新编译会更新,因为数据库更新成功了,重新获取了数据
wxml
<view class="container">
<view wx:for="{{list}}" wx:for-index="listindex">
<view class="power" wx:for-items="{{item.data}}">
<view class="power_info" data-listindex="{{listindex}}" data-index="{{index}}" bindtap="onClickPowerInfo">
<!-- 显示列表主题 -->
<view class="power_info_text">
<view class="power_info_text_title">{{item.project}}</view>
<view class="power_info_text_tip">{{item.hight}}</view>
</view>
<!-- 显示列表箭头图标 -->
{{item.showItem}}
</view>
<view wx:if="{{item.showItem}}">
<view class="power_item_title">{{item.project}}</view>
<view class="power_item">
<view class="power_item_title" bindtap="viewProject">
{{item._id}}
{{item.width}}
{{item.hight}}
</view>
</view>
</view>
</view>
</view>
</view>
js
wx.cloud.init({env: 'dbw3dev-5gf8fz972fd029e2'});
const db = wx.cloud.database();
Page({
data:{
list:[{
data:[
{project:'项目1',height:100,showItem:true},
{project:'项目2',height:200,showItem:false}
]}
]
},
onClickPowerInfo(e) {
////注意下标获取
const index = e.currentTarget.dataset.index,listindex= e.currentTarget.dataset.listindex
const list = this.data.list;
list[listindex].data[index].showItem=!list[listindex].data[index].showItem;
this.setData({
list
})
const docc=getLimit1[index]._id
db.collection("project").where({
_id:docc
}).update({
data:{
showItem:list[listindex].data[index].showItem///////////////
},
})
},
})
代码逻辑没问题,你打印一下getLimit1修改前和修改后!
你打印一下是不是getLimit1 真的改变了 。
你用const 声明 改成let试试