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

Posted 2023-02-22

【中文标题】Vue 未使用来自 Axios 请求的数据更新数组中的 Vuetify 数据表

【英文标题】：Vue not updating Vuetify data-table from array with data from Axios request

【发布时间】：2020-04-20 03:28:02

【问题描述】：

我有一个问题，一直在寻找几个小时来解决它，但没有任何成功。 简而言之：在 forEach 循环中，我将我的 const "mijndata" 添加到我的数组 "Signalen" 中。可以看到我的数组填充成功了。

但是，我的 Vuetify 数据表组件没有显示我的数据。如果我单击排序列或进行搜索，我的数据会突然出现。所以问题一定是Vue没有检测到“signalen”数组的变化。

我已经阅读了有关此问题的多个其他主题，并且已阅读：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”数组中。

非常感谢任何帮助！

【参考方案1】：

终于找到答案了。 我通过在 const "mijndata" 上使用 Vue.set 来修复它。

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