Javascript VueJs插入到嵌套列表中

我想让用户创建我的网站结构。例如，我有建筑物和房间。用户必须能够创建建筑并随后将房间插入其中。然而，我试图做的似乎并没有实现：

我到目前为止所做的一切

js

---

我不知道如何使它工作。我注意到的两件事是，现在所有建筑物的房间模型都是相同的，我必须根据buildingId对其进行更改，但是，我还没有弄清楚。请您帮助我如何进行此操作。

通过在名称末尾添加建筑id，使您的模型对于建筑阵列中的每个项目都是唯一的

因此，模型名称变为

v-model=“newRoom[building.id]”

---

并将其传递到您的方法中

addNewRoomToBuilding（building.id，newRoom[building.id]）

代码似乎正在运行。有什么问题吗？仅供参考你粘贴了错误的代码对不起，我已经修复了。问题是，如果插入两个建筑并编辑其中一个的房间输入文本，则另一个的输入也会更改。

new Vue({
  el: '#vue-app',

  data: {
    buildings: []
  },

  computed: {
    buildingCount() {
        return this.buildings.length
    },
    getBuildingRoomsLength(section) {
        return this.buildings.rooms.length
    }
  },

  methods: {    
    addNewRoomToBuilding(buildingId, newRoom) {
        if(newRoom !== undefined) {     this.buildings[parseInt(buildingId)-1].rooms.push(newRoom.title)
      console.log(this.buildings[parseInt(buildingId)-1])
      }
    },
    addNewBuilding() {
        this.buildings.push({
        id: this.buildings.length+1,
        rooms: []
      })
    },

    deleteTodo(todo) {
      this.todos.$remove(todo)
    }
  }
});