javascript - Vue 未使用来自 Axios 请求的数据更新数组中的 Vuetify 数据表
问题描述
我有一个问题,一直在寻找几个小时来解决它,但没有任何成功。简而言之:在 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”数组中。
我真的很感激任何帮助!
解决方案
终于找到了答案。我通过在 const "mijndata" 上使用 Vue.set 来修复它。
例如:Vue.set(mijndata, 'signaalid', signaal.ac_id)
推荐阅读
- r - 如何查看分配给某个值的原始代码,例如 [x <- ggplot(ToothGrowth, aes(x=dose, y=len, color=dose))]
- javascript - React 不会更新作为 props 传递的组件的 props
- database - 将数据库添加到树莓派 kubernetes 集群
- swift - 访问函数(成员)的按钮名称
- healthkit - 有没有办法在请求 HealthKit 权限时将“打开所有类别”默认切换为活动状态?
- ionic-framework - 找不到 API 密钥页面
- javascript - 如何在 Angular 中处理异步函数
- javascript - 如何使用 ES6 模块为变量/函数使用动态名称导出?
- emacs - 如何在 emacs org 模式下重新计算列的总和?
- python - Shell 命令仅在手动执行而不是从 Python 文件中执行时才有效