Question

在Vue中调用getRating函数时遇到此错误。我在laravel中使用Vue星级评分软件包。不明白是什么问题。

 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;
                            }
                        }
                        $('.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)

                    });
                },

TypeError：无法读取listToStyles.js：26上未定义的属性“ length”

希望你们给我一些建议！

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)

                    });
                },

vue-star-rating TypeError：无法读取listToStyles.js中未定义的属性“ length”：26

2 个答案: