VueJs插入到嵌套列表中

Question

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

JSFiddle到目前为止我做了什么。

JS

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

我不知道如何让它发挥作用。我注意到的一些事情是现在所有建筑物的房间模型都是相同的，我必须根据buildingId进行更改，但是，我无法弄明白。你能帮我解决一下这个问题吗？

Answer 1

通过将建筑物ID附加到名称的末尾，使建筑物阵列中的每个项目都具有唯一的模型。

因此模型名称变为v-model="newRoom[building.id]"

并将其传递给您的方法addNewRoomToBuilding(building.id, newRoom[building.id])