VueJs einfügen in verschachtelte Liste

Question

Ich möchte den Benutzer die Struktur meiner Website erstellen lassen. Zum Beispiel habe ich Gebäude und Räume. Der Benutzer muss in der Lage sein, ein Gebäude zu erstellen und anschließend Räume einzufügen. Was ich jedoch versuchte, scheint es nicht zu erreichen:

JSFiddle von dem, was ich bisher gemacht habe.

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

Ich bin nicht sicher, wie es funktioniert. Ein paar der Dinge, die ich bemerkt habe, ist, dass das Raummodell jetzt für alle Gebäude gleich ist und ich es entsprechend der Gebäude-ID ändern muss, aber ich kann es noch nicht herausfinden. Könnten Sie mir bitte helfen, dies zu tun?

Answer 1

Machen Sie Ihr Modell für jedes Objekt im Gebäude-Array einzigartig, indem Sie die Gebäude-ID an das Ende des Namens anhängen.

So ist der Modellname wird v-model="newRoom[building.id]"

Und das gleiche in Ihrer Methode addNewRoomToBuilding(building.id, newRoom[building.id])