вернуть объект данных в компонент vue, используя laravel 5.6 и axios - PullRequest
Новая
       10

вернуть объект данных в компонент vue, используя laravel 5.6 и axios

0 голосов
/ 25 июня 2018

Я пытаюсь построить карусель доступности.Он покажет дни недели и время, когда кто-то доступен.Я использую Laravel и vue.js.Я сделал веб-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 в blade-сервер, используя следующее, передавая идентификатор области и преподавателя 

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

Спасибо за помощь.

1 Ответ

0 голосов
/ 26 июня 2018

Объект ответа 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>
...