提取API在vue-laravel中不起作用

时间:2020-06-09 17:52:04

标签: laravel vue.js fetch fetch-api

我正在尝试从数据库中获取一些数据,但显示为NaN 这是我正在使用的路线:

> Route::get('/rating/{id}','API\RatingController@getrating')->name('getrating');

这是我调用的getRating方法:

<script>
    export default {
        data(){
            return {
                rating:0,
                totalrate:0,
                totaluser:0     
            }
        },
        methods: {
            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)

                });
            },

        },
        mounted() {
            this.getRating();
            console.log('Component mounted.')
        }
    }
</script>

我从Vue星级评分软件包中获得了这段代码 这是我的控制器:

 public function getrating($id) {
        return RatingResource::collection(Rating::all())->where('business_id', $id);
    }

获取是否有问题或什么??????????????????????????

0 个答案:

没有答案