我有一个 Vue 组件,它在创建的钩子(Hook)中获取一些数据,看起来像
axios.get('/all')
.then(res => {
this.rows = res.data.table
axios.post('/names', { array from GET/all })
.then(res => {
this.rows.users = res.data.data
})
})
我遇到的问题是,Vue 模板显示的是我第一次设置 this.rows 时的数据,我已经用 console.log 检查了我设置 this.rows.users 的位置,并且它放置了正确的内容那里有数据。我缺少什么导致我的模板无法输出正确的数据?
最佳答案
您可以尝试将它们一起更新并减少渲染,并且如果它们不相互依赖,还可以防止链接 promise 。
下面的代码应该可以工作
Promise.All([axios.get('/all'),axios.post('/names')]) //executes them parallely
.then(([rowsRes,usersRes]) => {
this.rows = {...rowsRes.data.table, users: usersRes.data.data}
});
更新
你可以试试
axios.get('/all')
.then(res => {
this.rows = res.data.table
axios.post('/names', { array from GET/all })
.then(res => {
this.rows = {...this.rows, users: res.data.data} // do not mutate inner keys which can cause change detection issues.
})
})
关于javascript - Vue 需要在创建的方法中更新数据两次,但只有第一次可以工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58331793/