Vue需要两次更新created方法中的数据，但只有第一次有效答案

【问题标题】：Vue need to update data in created method twice but only first is workingVue需要两次更新created方法中的数据，但只有第一次有效
【发布时间】：2019-10-10 22:15:34
【问题描述】：

我有一个 Vue 组件，它在创建的钩子中获取一些数据，它看起来像

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 时的数据那里的数据。我错过了什么会阻止我的模板输出正确的数据？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以尝试一起更新它们并减少渲染，如果它们不相互依赖，还可以防止链接承诺。

下面的代码应该可以工作

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

【讨论】：

第二个只能在第一个运行后运行。 Promise.All 我认为不会因此而起作用。我将编辑 OP 以使其更清晰
是的，很抱歉，现在试图让它更清楚。
你可以试试这个吗？
刚刚试了一下，chrome 控制台说它无法传播不可迭代的数组，当我执行console.log(this.rows.users) 时，我得到了正确的名称，尽管它们已排序.开始认为我最好将其发送到后端进行处理，而不是与 Vue 对抗。
也许行具有循环结构，使其不可迭代；这可能是更重要的原因，vue 更改检测没有按预期工作