return data object to vue component using laravel 5.6 and axios

Question

I am trying to build an availability carousel. It will show the days of the week, and what time someone is available. I am using Laravel and vue.js. I have done the web api, and I can get the data object following the route

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

with this in my availability controller

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

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

That all works.

But when I try and pull it into Vue, nothing shows up. I can't seem to figure out what I might be missing.

I pulled the vue component into blade using the following, and passing in the area and tutor id

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

and in Availability.vue, I think where I am going wrong is pulling the data in with props, but I am really not sure anymore.

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

Thank you for the help.

Use response.data instead of response.json(), Also I believe you should use either mounted or created instead of ready in your component — Badu
– Badu, Commented Jun 25, 2018 at 20:59
That was bang on, thank you. If you wanted to post that as an answer I will accept it. I do have a follow up tho. To finish it off, i would change the console.log to this.availability = response.data; , and call it in the template like, {{ availability.sunday_end }} . I think that's it, or do I still have to add it to data () — Dustin
– Dustin, Commented Jun 25, 2018 at 21:47
The axios response object has the data field which contains the response from the request, in your case the json object i.e {data: availability} that you are returning from Laravel. To get the availability you have to use response.data.data. — Badu
– Badu, Commented Jun 25, 2018 at 21:58

Badu · Accepted Answer · 2018-06-26 08:34:27Z

2

Axios response object has data field which contains the response from the server. To get the data use

response.data

Also for Vue 2.0 components use mounted instead of ready for when the component is ready. If you are only loading data from the server (and not manipulating the DOM) you can use created instead.

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>

edited Jun 26, 2018 at 8:34

answered Jun 25, 2018 at 22:29

Badu

1,0828 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dustin Over a year ago

I still don't have something quite right. I correctly get the availability response, but nothing is being passed up to the template, and the data availability array in vue devtools is empty.

Dustin Over a year ago

Thank you for all your help. I am so close, it shouldn't take me much longer.

Collectives™ on Stack Overflow

return data object to vue component using laravel 5.6 and axios

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related