vue.js - Vuejs-更新数组中对象的数组

Question

我正在开发一个帮助台工具，其中有看板 View 。

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

1. 我询问我的帮助台团队(屏幕截图中的“测试”)
2. 我查询该团队的阶段("new"、“进行中”)
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 中，我将每个阶段的属性“tickets”添加到空列表中。问题是当我查询每个阶段的所有门票时。我知道如何通过拼接在数组中插入单个对象，或者如何从数组中删除一个对象，但我不知道如何在触发 Vue react 性时将整个数组分配给数组中对象的属性。在这里，我想将所有门票(这是一个列表)放入 stage.tickets。

有可能实现这个目标吗？

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

提前致谢!

编辑:

原来是模板部分产生了错误。我不认为这是根本原因，因为 View 的一部分已渲染。我认为如果是这样的话，它会阻止整个 View 的渲染。但最后，在我的模板中，我有一部分正在执行 stage.tickets.length ，这在使用单个查询填充我的 View 时起作用。当使我的 API 更加精细并独立于阶段查询门票时，有时 stage 没有 tickets 属性，直到我使用 this.$set 手动设置它(舞台，'门票'，[])。因此，模板会停止渲染并引发问题。但是，如果没有该模板问题，更新我的 stage.tickets 的方法就可以正常工作。

Answer 1

我可以 react 性地更新阶段。这是我的完整代码；我使用了数组对象的 push 方法，它有效:

<template>
  <div>
    <li v-for="item in stages" :key="item.stageId">
      {{ item }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stages: [],
    };
  },
  methods: {
    async getTeamStages() {
      this.stages = [{ stageId: 1 }, { stageId: 2 }];
      for (let stage of this.stages) {
        this.$set(stage, "tickets", []);
      }
      for (let stage of this.stages) {
        await this.getStageTickets(stage);
      }
    },
    async getStageTickets(stage) {
      const tickets = ["a", "b", "c"];
      for (let ticket of tickets) {
        this.stages[this.stages.indexOf(stage)].tickets.push(ticket);
      }
    },
  },
  mounted() {
    this.getTeamStages();
  },
};
</script>

需要注意的是，我使用了数组对象的 concat 方法，并且也有效:

this.stages[this.stages.indexOf(stage)].tickets = this.stages[this.stages.indexOf(stage)].tickets.concat(tickets);

我尝试了你的方法，其中一些工作正常:

不起作用

this.$set(this.stages[this.stages.indexOf(stage)].tickets, tickets)

工作了

this.$set(this.stages[this.stages.indexOf(stage)].tickets, 0, tickets[0]);

工作了

  stage.tickets = tickets
  this.stages.splice(this.stages.indexOf(stage), 1, stage)

我确定这是 XY 问题..