Laravel 5 使用laravel 5.6和axios将数据对象返回到vue组件

我正在尝试建立一个可用性转盘。它将显示一周中的几天，以及某人何时有空。我正在使用Laravel和vue.js。我已经完成了WebAPI，我可以按照路径获取数据对象

Route::group(['prefix' => '/{area}'], function () {
    Route::get('/{tutor}/availability','Tutor\AvailabilityController@show'); 
});

在我的可用性控制器中

public function show(Request $request, Area $area, Tutor $tutor)
{
    $availability = $tutor->availability()->get();

    return response()->json([
        'data' => $availability
    ], 200);
}

这一切都有效

但当我尝试将其拉入Vue时，什么都没有显示。我似乎不知道我可能错过了什么

我使用以下命令将vue组件拉入blade，并传入区域和导师id

<availability area-id="{{ $area->slug }}" tutor-id="{{ $tutor->slug }}">
</availability>

在Availability.vue中，我认为我的错误在于用道具将数据拉进来，但我真的不再确定了

<script>


  $(document).ready(function() {

      $("#availability").owlCarousel();

  });

  export default {

    props: {
      areaId: null,
      tutorId: null
    },
    data () {
      return {
        availability: []
      }
    },

    methods: {
      getAvailability () {

        axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability').then((response) => {
          console.log(response.json());
        });
      }
    },
    ready () {
      this.getAvailability();
    }
  }


</script>

$（文档）.ready（函数（）{
$（“#可用性”）.owlCarousel（）；
});
导出默认值{
道具：{
areaId:null，
教程：空
},
数据（）{
返回{
可用性：[]
}
},
方法：{
getAvailability（）{
获取（'/'+this.areaId+'/'+this.tutoroid+'/availability'）。然后（（响应）=>{
log（response.json（））；
});
}
},
就绪（）{
这是getAvailability（）；
}
}

---

感谢您的帮助。

Axios响应对象的数据字段包含来自服务器的响应。要获得数据，请使用

response.data

同样，对于Vue 2.0组件，在组件准备就绪时使用

mounted

而不是

ready

。如果您只是从服务器加载数据（而不是操作DOM），则可以使用

created

export default {

    props: {
      areaId: null,
      tutorId: null
    },
    data () {
      return {
        availability: []
      }
    },

    methods: {
      getAvailability () {
        var that = this;
        axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability')
        .then((response) => {
          console.log(response.data); // should print {data: availability_object}

          // Set this component's availability to response's availability               
          that.availability = response.data.data;

          //OR
          //Add response's availability to the components' availability
          that.availability.push(response.data.data);
        });
      }
    },
    mounted () {
      this.getAvailability();
    }
 }
</script>

导出默认值{
道具：{
areaId:null，
教程：空
},
数据（）{
返回{
可用性：[]
}
},
方法：{
getAvailability（）{
var=这个；
获取（'/'+this.areaId+'/'+this.tutorial+'/availability'））
。然后（（响应）=>{
console.log（response.data）；//应打印{data:availability\u object}
//将此组件的可用性设置为响应的可用性
即.availability=response.data.data；
//或
//将响应的可用性添加到组件的可用性中
即可用性推送（response.data.data）；
});
}
},
挂载（）{
这是getAvailability（）；
}
}

使用response.data而不是response.json（），而且我认为您应该在您的组件中使用mounted或created而不是ready，谢谢。如果你想把它作为一个答案，我会接受它。我有一个后续的tho。为了完成它，我将console.log更改为this.availability=response.data，并在模板中调用它，如{availability.sunday\u end}。我想就这样了，或者我还需要将它添加到data（）中axios响应对象有一个数据字段，其中包含来自请求的响应，在您的例子中是从Laravel返回的json对象，即{data:availability}。要获得可用性，您必须使用response.data.data。我仍然没有完全正确的东西。我正确地获得了可用性响应，但没有向模板传递任何信息，并且vue devtools中的数据可用性阵列为空。感谢您的帮助。我离得很近，不需要太长时间。