Vue Js-axios的问题与laravel执行多个并发请求

Question

好吧，我可能有个小问题，但我不知道。

如果我仅使用axios通过一个http请求，则一切正常。

但是当我使用多个请求时，会在控制台日志中得到结果，但无法发送以查看文件（laravel刀片视图文件）。

让我告诉你我的代码：

brand.blade.php

// main element for Vue js el: '#container'
<div id="container" class="row all_brands">
        <brands></brands>
    </div>


// template for brand component
<template id="brand-template">
   <ul>
     // if I only pass one http request through axios then  my data shows here but for multiple request not showing anything.
     <li v-for="brand in list" v-text="brand.brand_id"></li>

   </ul>
   @{{count}}
</template>

brand.js

Vue.component('brands',{

template: '#brand-template',

data: function(){

    return{

        list: [],
        count: ''
    }

},

created: function(){

    //axios.get('api/brands').then(response => this.list = response.data) ; // here I send only one gttp request and working find..

    axios.all([
    axios.get('api/brands'),
    axios.get('api/brand_count')
    ])
        .then(
        axios.spread(
            function (brand, count) {
             // this is not working and not set these data to my brand.blade.php file template
             this.list = brand.data;
             this.count = count.data;
             // console show me all the data that coming from http request  
            //console.log('list',brand.data);
            //console.log('count',count.data);
            }
    ))

}

});


new Vue({

el: '#container'

})

任何人都可以让我如何在视图文件中显示数据吗？

Answer 1

之所以发生这种情况，this是因为的作用域在中不正确axios.spread，在您使用es6箭头功能时，它对您不起作用，该功能会自动绑定this作用域。

您可以进行以下更改以使其起作用：

created: function(){
    var that = this    
    axios.all([
    axios.get('api/brands'),
    axios.get('api/brand_count')
    ])
        .then(
        axios.spread(
            function (brand, count) {
             that.list = brand.data;
             that.count = count.data;
            }
    ))

}