Vue.js Vuejs 更新数组中对象的数组

我正在开发一个帮助台工具，其中有看板视图.

我以前在后端使用嵌套序列化程序，我设法让所有内容都与单个查询一起工作，但它不可扩展(而且很难看)，所以我切换到另一个模式:

1. 我询问我的帮助台团队(屏幕截图中的"测试")
2. 我询问该团队的各个阶段("新的"、"进行中的")
3. 我分阶段查询每个阶段的门票

因此，当我安装组件时，我会执行以下操作:

async mounted () {
  if (this.helpdeskTeamId) {
    await this.getTeam(this.helpdeskTeamId)
    if (this.team) {
      await this.getTeamStages(this.helpdeskTeamId)
      if (this.stages) {
        for (let stage of this.stages) {
          await this.getStageTickets(stage)
        }
      }
    }
  }
},

其中getTeam、getTeamStages和getStageTickets是:

async getTeam (teamId) {
  this.team = await HelpdeskTeamService.getTeam(teamId)
},

async getTeamStages (teamId) {
  this.stages = await HelpdeskTeamService.getTeamStages(teamId)
  for (let stage of this.stages) {
    this.$set(stage, 'tickets', [])
  }
},

async getStageTickets (stage) {
  const tickets = await HelpdeskTeamService.getTeamStageTickets(this.helpdeskTeamId, stage.id)
  // tried many things here below but nothing worked.
  // stage.tickets = stage.tickets.splice(0, 0, tickets)
  // Even if I try to only put one :
  // this.$set(this.stages[this.stages.indexOf(stage)].tickets, 0, tickets[0])
  // I see it in the data but It doesn't appear in the view...
  // Even replacing the whole stage with its tickets :
  // stage.tickets = tickets
  // this.stages.splice(this.stages.indexOf(stage), 1, stage)
},

在getTeamStages中，我 for each 阶段添加了一个属性"tickets"到一个空列表中.问题是当我查询每个stage的所有门票时.我知道如何在带有拼接的数组中插入单个对象，或者如何从数组中删除一个对象，但我不知道如何在触发Vue时将整个数组指定给数组中对象的属性.在这里，我想把所有的票(这是一个列表)放到stage.tickets.

有可能做到这一点吗？

如果不是，那么实现类似目标的正确设计是什么？

提前谢谢！

100

事实证明，模板部分生成了一个错误.我不认为这是根本原因，因为部分视图已呈现.我认为如果是这样的话，它会阻止整个视图的呈现.但最后，在我的模板中，我有一个部分在使用单个查询填充我的视图时工作.当我的API变得更细粒度，并独立于阶段查询票据时，有一段时间stage没有tickets属性，直到我手动将其设置为this.$set(stage, 'tickets', []).因此，模板会停止渲染并引发问题.但是，如果没有模板问题，更新我的stage.tickets的方法就会起作用.