javascript - 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])