Vue Js - axios 问题使用 laravel 执行多个并发请求

Question

好的，我可能有一些小问题，但我无法解决。

如果我使用 axios 只传递一个 http 请求，一切正常。

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

让我向您展示我的代码：

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;
            }
    ))

}