Question

我正在尝试构建可用性轮播。它会显示星期几，以及什么时候有空。我正在使用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中，我认为我出了问题的地方是使用props提取数据，但我现在不确定。

<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>

谢谢您的帮助。

Answer 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>

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

1 个答案: