使用 laravel 5.6 和 axios 将数据对象返回给 vue 组件答案

【问题标题】：return data object to vue component using laravel 5.6 and axios使用 laravel 5.6 和 axios 将数据对象返回给 vue 组件
【发布时间】：2018-12-04 12:01:35
【问题描述】：

我正在尝试构建可用性轮播。它将显示一周中的哪几天，以及某人有空的时间。我正在使用 Laravel 和 vue.js。我已经做了web api，我可以按照路由获取数据对象

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 组件拉入刀片，并传入区域和导师 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>

感谢您的帮助。

【问题讨论】：

使用 response.data 而不是 response.json()，另外我相信你应该在你的组件中使用 mount 或 created 而不是 ready
太棒了，谢谢。如果您想将其发布为答案，我会接受。我确实有后续行动。为了完成它，我会将 console.log 更改为 this.availability = response.data; ，并在模板中调用它，例如 {{ availability.sunday_end }} 。我想就是这样，还是我还得把它加到data中()
axios 响应对象具有包含请求响应的数据字段，在您的情况下是 json 对象，即您从 Laravel 返回的 {data: availability}。要获得可用性，您必须使用 response.data.data。

标签： laravel-5 vue.js axios

【解决方案1】：

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>

【讨论】：

我仍然没有完全正确的东西。我正确地得到了可用性响应，但是没有任何东西被传递给模板，并且 vue devtools 中的数据可用性数组是空的。
感谢您的所有帮助。我已经很近了，我应该不会花太多时间。