[Vuejs]-Return data object to vue component using laravel 5.6 and axios

by

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

Leave a comment