uni-app直接读取data里面的数据而不理会onLoad的Bug

uni-app直接读取data里面的数据而不理会onLoad的Bug

开发环境 版本号 项目创建方式
Windows MD HBuilderX

示例代码：

//前页面  
uni.navigateTo({  
    url: `/pages/userModule/dating/personalDetails?wu=${!wu}&id=${id}`,  
})

//onLoad  
this.is_wu = query.wu

//页面  
<view v-if="is_wu" class="wrap">  
    <u-swiper :list="list" height="480" border-radius="0" mode="number" indicator-pos="bottomRight"></u-swiper>  
</view>  
<view  v-if="!is_wu" class="wu">  
    <image src="/static/image/userModule/dating/wu.png" mode=""></image>  
</view>

操作步骤：

见上

预期结果：

根据前一页面参数不同而显示不同

实际结果：

只认data


### bug描述：
通过数据控制两个组件只显示其中一个，通过前面页面传参的形式来控制。但只读取了data里面的数值，onLoad里接受参数后并没有生效

更多关于uni-app直接读取data里面的数据而不理会onLoad的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

打印下 query.wu 的值

更多关于uni-app直接读取data里面的数据而不理会onLoad的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


值没问题，是数据类型变了，而v-if的自动类型转化无效

bug原因，经onLoad 后传递的值由布尔变成了字符串。需要重新转化为布尔类型

这不是 Bug，search 部分就是字符串啊，https://developer.mozilla.org/zh-CN/docs/Web/API/URL/search

这是一个典型的uni-app页面生命周期和数据响应问题。问题出在页面初始渲染时data中的默认值优先于onLoad中设置的值。

解决方案：

  1. 在data中初始化is_wu为null或undefined，而不是true/false：
data() {
  return {
    is_wu: null
  }
}
  1. 确保onLoad中正确接收参数：
onLoad(query) {
  this.is_wu = query.wu === 'true' // 注意参数是字符串
}
  1. 在模板中添加null判断：
<view v-if="is_wu !== null">
  <view v-if="is_wu" class="wrap">...</view>
  <view v-else class="wu">...</view>
</view>
回到顶部