중첩 목록에 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) 
    } 
    } 
}); 

나는 그것이 작동되도록하는 방법을하지 확신합니다. 내가 알아 차 렸던 몇 가지 사실은 모든 건물에서 방 모델이 동일하고 건물 ID에 따라 변경해야한다는 것입니다. 그러나 아직 이해할 수는 없습니다. 이 일을 어떻게 도와 주실 수 있겠습니까?

Answer 1

건물 ID를 건물 이름 끝에 추가하여 건물 배열의 각 항목에 고유 한 모델을 만드십시오.

그래서 모델 이름은

v-model="newRoom[building.id]"됩니다 그리고 당신의 방법 코드가 작동하는 것 같군 addNewRoomToBuilding(building.id, newRoom[building.id])