uniapp项目中经常需要在页面加载或者点击按钮的时候触发一些操作,或发起请求来改变一些字段的值,有时候会发现在请求获取到值赋值给data中字段以后,页面展示内容未能实时刷新,一般情况有两种可能。1:请求以后未成功赋值给字段;2:赋值给字段以后页面没有实时刷新,有思路以后寻找原因就有头绪了,以下针对两种情况进行分析解决
1:请求以后未成功赋值给字段
微信开发者工具中的AppData和console控制台是常用的两个工具,可以实时在AppData中查看页面中(注意应该无法查看到组件中的AppData,只能获取到页面的AppData)的data里面的字段信息的值是什么状态及变化,如果是查看组件中的赋值状态后面会提到,更简单的方法就是直接在赋值的前后console.log该字段看console出来的内容即可,这种情况一般都是ES5中this指向的问题,可以在方法开始的地方定义一个变量保存当前this指向,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,所以不同的场景就会有不同的指向问题,为了规避因this指向导致的赋值失败,可以在方便开端定义一个that保存当前this指向,后面逻辑中可以由that代替this。判断是否是这种原因造成的很简单,在赋值前后console或者debugger在控制台输出this和this.key(data中的变量)即可
function : async function() {
let that = this
// 逻辑代码部分
const json = await ********({
method: 'POST',
header: {
'jwt': jwt
},
query: {
time: new Date().getTime()
}
});
if (json[1].data.code === 1000) {
that.key = json[1].data.data.value
}
}
微信开发者工具AppData
2.赋值给字段以后页面没有实时刷新
判断是否是因为小程序未实时刷新引发的渲染错误的问题,可以通过查看AppData中的字段的值或者通过console、debugger等方式查看该时间节点data中的值有没有正常改变,如果data中的值正常改变页面的展示不对可以使用computed
// template部分
<button @click="takeCart" type="primary">
{{ btnText === 0 ? '请选择尺码' : btnText == 1 ? '已售罄' : '加入购物袋' }}
</button>
// script部分
computed: {
storeName() {
// 引用vuex,利用vuex存储字段
return this.$store.state.storeName;
},
btnText() {
// 本地data中的字段信息 因为当前项目中涉及到这个button的判断条件比较多比较复杂,所以拆分出一部分逻辑出来
if (this.sizeIdx === -1 && this.sizeArr.length !== 0) {
return 0;
} else if (this.sizeIdx !== -1 && this.sizeArr[this.sizeIdx].qty == 0 || this.sizeArr.length == 0) {
return 1;
} else {
return 2;
}
if (!this.colorName || (this.sizeIdx === -1 && this.sizeArr.length == 0)) {
return false;
} else {
let bool = (this.sizeIdx === -1 && this.sizeArr.length !== 0) || this.colorPriceJson[this.colorName].totalQty == 0 ? true : false;
return bool;
}
}
},
网友评论