Data not showing on vue.js component using laravel api

Question

I'm trying to get the data from database using an API, but there are no output on my vue controller.

Am I doing this right?

I think I'm assigning the scheduleList the wrong way.

I'm very new to vue.js and API, I want to know what I'm doing wrong here.

Controller

public function schedules(){ 
    return Schedule::all(); 
}

api.php

    Route::get('schedules', 'CalendarController@schedules');

Vue Component

    <script>
    import axios from 'axios'
    
    export default {
    
      data() {
        return {
          schedules: [],
    
          scheduleList: [
             {
            id: schedules.id,
            title: schedules.title,
            category: schedules.category,
            start: schedules.start,
            end: schedules.end
            },
          ],
    
        };
      },
     
      methods: {
       
        loadSchedules() {
         axios.get('/api/schedules')
         .then((response) => {
           this.schedules = response.data;
         })
         
        }
      },
      mounted() {
        this.loadSchedules();
      }
    };
    </script>
    <style>
    </style>

I think it's because you're assigning values to scheduleList that don't exist yet — Dan Knights
– Dan Knights, Commented Nov 15, 2020 at 9:48
Im using tui.calendar. But i think the problem is how assign the value id: schedules.id. Is this the correct way? — Rei
– Rei, Commented Nov 15, 2020 at 9:50
Im getting the error ReferenceError: schedules is not defined — Rei
– Rei, Commented Nov 15, 2020 at 9:51
add your loadSchedules into a created(), then add async await to your loadSchedules function. — Deniz
– Deniz, Commented Nov 15, 2020 at 10:06

Boussadjra Brahim · Accepted Answer · 2020-11-15 10:01:56Z

The issue is in your data option because you're referencing schedules which is undefined, I'm sure that you're meaning this.schedules but doing that will not solve the issue because at first rendering this.schedules is an empty array, another problem that you're referencing at as object in scheduleList items using schedules.id, if the schedules property is an array i recommend the following solution :

<script>
import axios from 'axios'

export default {

  data() {
    return {
      schedules: [],

      scheduleList: [],

    };
  },
 
  methods: {
   
    loadSchedules() {
     axios.get('/api/schedules')
     .then((response) => {
       this.schedules = response.data;
  
      let schedule=this.schedules[0]
     
    this.scheduleList.push({
        id: schedule.id,
        title: schedule.title,
        category: schedule.category,
        start: schedule.start,
        end: schedule.end
        })

     })
     
    }
  },
  mounted() {
    this.loadSchedules();
  }
};
</script>

Deniz · Accepted Answer · 2020-11-15 09:51:48Z

0

always catch errors if you do promises.

loadSchedules() {
     axios.get('/api/schedules')
     .then((response) => {
       this.schedules = response.data;
     })
     .catch(error => {
       console.log(error)
     })

inside your error you can better see whats going wrong. other way is the "network" tab in your browser where you can trace your api request

answered Nov 15, 2020 at 9:51

Deniz

1,48819 silver badges34 bronze badges

2 Comments

Rei Over a year ago

Yes, I'm catching errors on my original code. I just removed it so that the code is shorter here. I cant see any errors on the network tab though.

Deniz Over a year ago

then try console.log(error.response) as output inside your catch

Collectives™ on Stack Overflow

Data not showing on vue.js component using laravel api

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related