VueJs插入到嵌套列表

我想讓用戶創建我的網站的結構。例如，我有建築物和房間。用戶必須能夠創建建築物並隨後將房間插入其中。然而，我試圖做的似乎並沒有達到它：VueJs插入到嵌套列表

JSFiddle到目前爲止我所做的。

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對其進行更改，但是我還是無法弄清楚。你能幫我怎麼做。

來源

2017-12-18 AGoranov

的代碼似乎是工作。問題是什麼？ – samayo

僅供參考，您粘貼錯誤代碼 – HEATH3N

對不起，我修正了它。問題是，如果插入2個建築物並編輯其中一個的房間輸入文本，則另一個的輸入也會更改。 – AGoranov

通過將建築物ID附加到名稱的末尾，使建築物陣列中的每個項目都具有唯一的模型。

所以型號變爲v-model="newRoom[building.id]"

又通同放入你的方法addNewRoomToBuilding(building.id, newRoom[building.id])

來源

2017-12-18 12:14:32

謝謝，它完美地解決了我的問題。 – AGoranov

VueJs插入到嵌套列表

回答

相關問題