Vue不使用来自Axios请求的数据更新数组中的Vuetify数据表

Question

我有问题，一直在寻找解决问题的方法，但没有成功。简而言之：在forEach循环中，我将常量“ mijndata”添加到数组“ Signalen”中。我可以看到我的数组已成功填充。

但是，来自Vuetify的数据表组件未显示我的数据。如果单击“排序”列或进行搜索，则会突然出现我的数据。因此问题必须是Vue无法检测到对“信号”数组的更改。

我已经阅读了有关此问题的其他多个主题，并且阅读：https://vuejs.org/v2/guide/list.html#Caveats

但是到目前为止，我无法解决此问题。

注意：如果我从Axios调用的结果直接推入“ signalen”数组，则不会出现此问题。但是不幸的是，这不是一个选择，因为我需要创建一个对象，然后将其推入数组。

这是我的代码问题：

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)
    },

我的数据表：

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

我的导出数组：

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: [],
    }),

标题与我数组中的键匹配。就像我说的那样，问题完全出在将我的“ mijndata”对象推入“ signalen”数组中。

我将非常感谢您的帮助！

Answer 1

最后找到答案。我通过在const“ mijndata”上使用Vue.set来修复它。

例如：Vue.set(mijndata, 'signaalid', signaal.ac_id)