vue-star-rating 类型错误：无法读取 listToStyles.js:26 处未定义的

Question

在 Vue 中调用 getRating 函数时出现此错误。我在 laravel 中使用 Vue-star-rating 包。不明白是什么问题。 getRating(){                    var pathArray = location.pathname.split('/');                    var pid = pathArray[2];                    fetch(`/api/rating/${pid}`)                    .then(res => res.json())                    .then(res => {                        var mydata = res.data;                        this.totaluser = mydata.length;                        var sum = 0;                        for(var i=0; i < mydata.length; i++){                            sum += parseFloat(mydata[i]['rating']);                        }                         var avg = sum/mydata.length;                        this.totalrate = parseFloat(avg.toFixed(1));                        var bar1 = 0;                        var bar2 = 0;                        var bar3 = 0;                        var bar4 = 0;                        var bar5 = 0;                        for(var j = 0; j < mydata.length; j++){                            if(parseInt(mydata[j]['rating']) == '1'){                                bar1 += 1;                            }                            if(parseInt(mydata[j]['rating']) == '2'){                                bar2 += 1;                            }                            if(parseInt(mydata[j]['rating']) == '3'){                                bar3 += 1;                            }                            if(parseInt(mydata[j]['rating']) == '4'){                                bar4 += 1;                            }                            if(parseInt(mydata[j]['rating']) == '5'){                                bar5 += 1;                            }                        }类型错误：无法在 listToStyles.js:26 处读取未定义的属性“长度”希望大家多多指教！

Answer 1

您所做的所有“长度”事情都在您获得的 res.data 上，而且看起来是未定义的。尝试制作控制台日志并确保您的 api 为您提供了您想要制作的内容 res.data.length

Answer 2

你myData是未定义的。您可以编写更安全的代码如下

getRating(){

                    var pathArray = location.pathname.split('/');

                    var pid = pathArray[2];

                    fetch(`/api/rating/${pid}`)

                    .then(res => res.json())

                    .then(res => {

                        var mydata = res.data || []; // sets myData to empty array if res.data is undefined

                        this.totaluser = mydata.length;

                        var sum = 0;

                        for(var i=0; i < mydata.length; i++){

                            sum += parseFloat(mydata[i]['rating']);

                        } 

                        var avg = sum/mydata.length; // this will produce error if mydata.length is zero

                        this.totalrate = parseFloat(avg.toFixed(1));

                        var bar1 = 0;

                        var bar2 = 0;

                        var bar3 = 0;

                        var bar4 = 0;

                        var bar5 = 0;

                        for(var j = 0; j < mydata.length; j++){

                            if(parseInt(mydata[j]['rating']) == '1'){

                                bar1 += 1;

                            }

                            if(parseInt(mydata[j]['rating']) == '2'){

                                bar2 += 1;

                            }

                            if(parseInt(mydata[j]['rating']) == '3'){

                                bar3 += 1;

                            }

                            if(parseInt(mydata[j]['rating']) == '4'){

                                bar4 += 1;

                            }

                            if(parseInt(mydata[j]['rating']) == '5'){

                                bar5 += 1;

                            }

                        }

                        $('.bar-1').css('width', bar1+'%');

                        $('.bar-2').css('width', bar2+'%');

                        $('.bar-3').css('width', bar3+'%');

                        $('.bar-4').css('width', bar4+'%');

                        $('.bar-5').css('width', bar5+'%');

                    })

                    .catch(err => {

                        console.log(err)

                    });

                },