我想删除项目中的嵌套数组“Men”。 我还想使用函数 addingData 和 removingData 在嵌套数组“Human”中添加新数据。 我试过 slice 和 pop 功能，但对 child 不起作用
这是html代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale">
<title>Graph</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items">
{{item.root}} -
<button v-on:click="addingData(item.id)"> + </button>
<button v-on:click="removingData(index)"> - </button>
<ul>
<li v-for="(child, child_index) in item.childs">
{{child.root}} - <button v-on:click="addingData(child_index)"> + </button>
<button v-on:click="removingData(child_index)"> - </button>
<ul>
<li v-for="(childLevel2, childLevel2_index) in child.childs">
{{childLevel2.root}} -
<button v-on:click="addingData(child_index)"> + </button>
<button v-on:click="removingData(childLevel2_index)"> - </button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
</html>
这是javascript代码
var app = new Vue({
el:'#app',
data:{
items: [
{
id: 1, root : 'Animal', childs:[
{id: 3, root: 'Human', childs:[
{id: 4, root: 'Men' ,childs: null},
{id: 5, root: 'women', childs: null}
]},
{id: 6, root: 'bunny', childs: null},
{id: 7, root: 'fish', childs: null}
]
},
{id: 2, root : 'Vehicle', childs: [
{id: 8, root: 'Car'},
{id: 9, root: 'Bike'}
]}
]
},
methods: {
addingData: function(index){
this.items.push({root : 'House'})
console.log(index)
},
removingData: function(index){
console.log(index);
//this.items.splice(index, 1);
Vue.delete(this.items, index);
}
}
})
如果有人能看一看，我将不胜感激!
最佳答案
Vue.delete适用于对象，不适用于数组。
你需要Array.splice .
所以我让你的代码工作:
https://jsfiddle.net/efrat19/t95vs0yd/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale">
<title>Graph</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items">
{{item.root}} -
<button v-on:click="addingData(index)"> + </button>
<button v-on:click="removingData(index)"> - </button>
<ul>
<li v-for="(child, child_index) in item.childs">
{{child.root}} - <button v-on:click="addingDataToChild(index,child_index)"> + </button>
<button v-on:click="removingDataFromChild(index,child_index)"> - </button>
<ul>
<li v-for="(childLevel2, childLevel2_index) in child.childs">
{{childLevel2.root}} -
<button v-on:click="addingDataToChild2(index,child_index,child_index)"> + </button>
<button v-on:click="removingDataFromChild2(index,child_index,childLevel2_index)"> - </button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre>{{items}}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
<script>
var main=new Vue({
el:'#app',
data:{
items: [
{
id: 1, root : 'Animal', childs:[
{id: 3, root: 'Human', childs:[
{id: 4, root: 'Men' ,childs: []},
{id: 5, root: 'women', childs: []}
]},
{id: 6, root: 'bunny', childs: []},
{id: 7, root: 'fish', childs: []}
]
},
{id: 2, root : 'Vehicle', childs: [
{id: 8, root: 'Car'},
{id: 9, root: 'Bike'}
]}
]
},
methods: {
addingData: function(index){
this.items[index].childs.push({root : 'House', childs: []})
},
removingData: function(index){
this.items.splice(index, 1);
},
addingDataToChild: function(index,child_index){
this.items[index].childs[child_index].childs.push({root : 'House', childs: []})
},
removingDataFromChild: function(index,child_index){
this.items[index].childs.splice(child_index, 1);
},
addingDataToChild2: function(index,child_index,child2_index){
this.items[index].childs[child_index].childs[child2_index].childs.push({root : 'House', childs: []})
},
removingDataFromChild2: function(index,child_index,child2_index){
this.items[index].childs[child_index].childs.splice(child2_index, 1);
},
}
})
<script/>
</html>
关于javascript - 如何使用函数 removingData 添加和删除嵌套数组 'items' 中的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54709177/