入れ子リストに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])