VueJs插入到嵌套列表

我想让用户创建我的网站的结构。例如,我有建筑物和房间。用户必须能够创建建筑物并随后将房间插入其中。然而,我试图做的似乎并没有达到它:VueJs插入到嵌套列表

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)

}

}

});

我不知道如何使它发挥作用。我注意到的一些事情是,现在的房间模型对于所有建筑物都是一样的,我必须根据buildingId对其进行更改,但是我还是无法弄清楚。你能帮我怎么做。

回答:

通过将建筑物ID附加到名称的末尾,使建筑物阵列中的每个项目都具有唯一的模型。

所以型号变为v-model="newRoom[building.id]"

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

以上是 VueJs插入到嵌套列表 的全部内容, 来源链接: utcz.com/qa/262723.html

回到顶部