javascript - Vue 需要在创建的方法中更新数据两次，但只有第一次可以工作

Question

我有一个 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 的位置，并且它放置了正确的内容那里有数据。我缺少什么导致我的模板无法输出正确的数据？

Answer 1

您可以尝试将它们一起更新并减少渲染，并且如果它们不相互依赖，还可以防止链接 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.
    })
})