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插入到嵌套列表

回答

相关问题