Vue not updating Vuetify data-table from array with data from Axios request

Question

I have a problem and have been looking for hours to get it resolved, without any success. In short: in a forEach loop I am adding my const "mijndata" to my array "Signalen". I can see that my array is filled successfully.

However, my data-table component from Vuetify is not showing my data. If I click the sort column or if I do a search, my data suddenly appears. So the problem must be that Vue doesn't detect changes to the "signalen" array.

I have already read multiple other threads on this issue and I have read: https://vuejs.org/v2/guide/list.html#Caveats

But I am so far unable to resolve this issue.

Note: if I do a direct push into my "signalen" array from the results of my Axios calls, I don't have this problem. But unfortunately this is not an option as I am needing to create an object which is then pushed into the array.

Here is my problem in code:

mounted () {        
        axios.get('/my api url').then(response => {
            const signalen = response.data.resources;
            signalen.forEach((signaal) => {
            const mijndata = {};
              axios.get('/my api url').then(response => {
                const relatedSensoren = response.data.resources;
                relatedSensoren.forEach(relatedSensor => {
                    axios.get('/my api url').then(response => {
                        const sensorConfigs = response.data.resources;
                        sensorConfigs.forEach(sensorConfig => {
                            axios.get('/my api url').then(response => {
                                const alarmRegels = response.data.resources;
                                alarmRegels.forEach(alarmRegel => {
                                    axios.all([axios.get('/my api url')])
                                    .then(axios.spread((...responses) => {   
                                        mijndata.signaalid = signaal.ac_id;  
                                        mijndata.signaalsettingid = alarmRegel.ar_id;           
                                    }));
                                }); 
                            });        
                        });
                    });                  
                });
              });
              //A few more gets following the same logic as above...

                //Push my const "mijndata" into my array "signalen"
                this.signalen.push(mijndata)
            });
        });
        //I can see that all of my objects are in my array "signalen"
        window.console.log(this.signalen)
    },

My data-table:

<v-data-table
    :headers="headers"
    :items="signalen"
    :search="search"
    class="elevation-1"
  >

My array in my export:

export default {
    data: () => ({
      headers: [
        {
          text: 'Signaalnummer',
          align: 'left',
          value: 'signaalid',
        },
        { text: 'Wanneer gaat dit alarm af?', value: 'signaalsetting' },
        { text: 'Manier van alarmeren', value: 'alarmsetting' },
        { text: 'Geadresseerde', value: 'alarmpersoon' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      signalen: [],
    }),

The headers match the keys from my array. Like I said, the problem is purely in pushing my "mijndata" object into my "signalen" array.

I would really appreciate any help!

Dilan Dilan · Accepted Answer · 2019-12-31T20:31:51

Finally found the answer. I fixed it by using Vue.set on the const "mijndata".

Eg: Vue.set(mijndata, 'signaalid', signaal.ac_id)

Vue not updating Vuetify data-table from array with data from Axios request

1 Answers