请教各位大神，uni-rate评分组件如何动态渲染

分类：uni-app

评分渲染

请教各位大神，我引用了uni-rate评分组件，如果是在onload直接赋值，它是可以正确显示，但是如果我是从服务器抓取数据，它貌似没有办法重新渲染。
请问要怎么做它才能够显示？
data() {
return {
thisRatenum:0,
}
}
onLoad:function(e){
console.log("a:" + this.thisRatenum);
//this.thisRatenum=5; 如果不走服务器，这里直接写死可以正确显示
this.getinfo(); //服务器抓取，内部可以显示this.thisRatenum已经获得了数据3,
console.log("c:" + this.thisRatenum); //但是这里又恢复了默认定义的数值
},

2019-06-14 10:47 负责人:无分享

8 个回复

UNIAPP学徒 - UNIAPP爱好者

遇到此问题的亲可以参考一下这个：http://www.86sucai.com/codes/180.aspx

小野心 (作者)

貌似有效啊。感谢分享。。。

2019-09-19 08:39
9***@qq.com

亲测有效，感谢分享

2019-11-08 22:56

DCloud_UNI_GSQ

注意this指向

小野心 (作者)

大神，您来都来了，能不能麻烦多说两句，这样的指点我vue小白看不懂啊。。。

2019-06-14 11:11
9***@qq.com

跟this指向没有关系，是BUG，每个方法执行前我都会let that = this；按照楼上添加watch就行了

2019-11-08 22:59

incess - 阿莫熊科技，长期合作项目,QQ微信同号 1410323850 专业团队为您解决问题

请求数据的时候 this指向改变了，变成请求方法本身，不是vue了。参考 https://www.jianshu.com/p/0c7d772bdb5b

小野心 (作者)

大神，您的链接都是理论，我看得不是很理解。

就我的例子而言，您能不能给点类似的代码参考。。。

就是this.getinfo();这个函数里面要怎么写才能够正常赋值成功这样的参考代码。。。

万分感谢。。。

2019-06-14 14:27
incess

回复小野心: let _this =this; 再将_this替代请求中的this

2019-06-14 14:30
incess

回复小野心: 请贴完整的代码，不然无法指导谢谢。

2019-06-14 14:30

小野心 (作者)

回复 incess: 感谢大神出手相助。

getinfo()

{

            uni.showLoading({  

                title:"加载中...."  

            })  

            uni.request({  

                url: this.ApiUrl+'/appcontent/",  

                method: 'GET',  

                data: {},  

                success: (data) => {  

                    uni.hideLoading();  

                            if (data.statusCode == 200) {     

                                if (data.data.state == 1) {           

                                    let homeData = JSON.parse(data.data.data);  

                                    //console.log(homeData);  

                                    this.xyxmaininfo = homeData[0].xyxmain[0];  

                                    this.thisRatenum = this.xyxmaininfo.Ratenum;  

                                    console.log(this.thisRatenum);                                     



                                }  

                                if (data.data.state == 6) {       

                                    uni.showToast({title: data.data.message});  



                                }     

                            }  



                },  

                fail: (data, code) => {  

                    uni.hideLoading();  

                    console.log('fail' + JSON.stringify(data));  

                },  

                complete: () => {}  

            });  

        },

代码非常简单，就是一个拉服务器获得数据的过程。函数内已经正确赋值了。

2019-06-14 14:40

incess

回复小野心: 内部this指向已经改变this指向的是uni.request 不是vue本身。换成_this

2019-06-14 15:06
小野心 (作者)

回复 incess: onLoad:function(e){

console.log("a:" + this.thisRatenum);

this.urltype = e.urltype;

//this.thisRatenum=5;

//let _this =this;

this.getinfo();

console.log("c:" + this.thisRatenum);

},

getinfo()

{

let _this =this;

uni.showLoading({

title:"加载中...."

})

uni.request({

url: this.ApiUrl+'/appcontent/xyxinfo?type=BAmbitionlist&inhid=20190313091154648BT37NE0W',

method: 'GET',

data: {},

success: (data) => {

uni.hideLoading();

if (data.statusCode == 200) {

if (data.data.state == 1) {

let homeData = JSON.parse(data.data.data);

//console.log(homeData);

this.xyxmaininfo = homeData[0].xyxmain[0];

_this.thisRatenum = this.xyxmaininfo.Ratenum;

console.log(_this.thisRatenum);

大神，我改了没变化，您看看究竟要怎么写才是对的，再次拜谢

2019-06-14 15:13
incess

回复小野心: 你这是异步请求 getinfo()里面的数据执行完会比你console.log("c:" + this.thisRatenum);慢，所以你console.log("c:" + this.thisRatenum);执行在getinfo()完成之前；回去看看js的基础，这些问题W3C或者菜鸟上面都能找到；至此,不再回复

2019-06-14 15:19
小野心 (作者)

回复 incess: 。。。我知道这个是异步，所以我才咨询vue是如何处理这类问题。还是要感谢您的指点。

2019-06-14 15:25