微信小程序执行了bindtap后,不会在界面执行wx:if里的代码

执行了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数据项当然不会更新了。之所以重新编译会更新,因为数据库更新成功了,重新获取了数据

img


要想wxml界面更新,应该更改list数据项,而且注意list数组下标另外起名。

img

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///////////////
      },
    })
  },
 
 
})
 
 

img


有其他问题可以继续交流~

代码逻辑没问题,你打印一下getLimit1修改前和修改后!

你打印一下是不是getLimit1 真的改变了 。
你用const 声明 改成let试试

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632