반응형
데이터 제거 기능을 사용하여 중첩된 배열 '항목'의 데이터를 추가 및 삭제하는 방법
항목에 중첩된 배열 'Men'을 삭제하고 싶습니다.또한 데이터 추가 및 데이터 삭제 기능을 사용하여 중첩된 배열 'Human'에 새로운 데이터를 추가하고 싶습니다.슬라이스 앤 팝 기능을 시도해 봤지만 아이에게는 효과가 없었다.
이것은 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 오브젝트용이지 어레이용이 아닙니다.당신은 필요합니다. 그래서 당신의 코드를 만들었습니다.
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>
각 루프에 따라 함수를 만들어 보십시오.객체를 전송하여 함수 내에서 수정할 수 있습니다.콘솔 로그에 예시를 남겼습니다.그것이 당신에게 출발점을 주는 데 도움이 되기를 바랍니다.
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
}]
}]
},
methods:{
addingDataLevelOne: function(items){
console.log(items)
items.push(this.items[0])
},
removeLevelOne: function(items){
console.log(items)
items.pop()
},
}
})<!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 in items">
{{item.root}} -
<button v-on:click="addingDataLevelOne(items)"> + </button>
<button v-on:click="removeLevelOne(items)"> - </button>
<ul>
<li v-for="child in item.childs">
{{child.root}} -
<button> + </button>
<button> - </button>
<ul>
<li v-for="childLevel2 in child.childs">
{{childLevel2.root}} -
<button> + </button>
<button> - </button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
</html>색인이 해제되었습니다.
Vue.delete(this.items[0].childs[0].childs, 0);
편집: 검색 방법
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'})
},
findItem: (item, el) => {
var e = el === app.items ? app.items : el.childs
if(e) e.forEach(function(i) {
if(i == item)
e.splice(e.indexOf(i), 1)
app.findItem(item, i)
})
},
removingData: function(index){
this.findItem(index, this.items)
}
}
})
<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(item)"> - </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)"> - </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)"> - </button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="script.js"></script>
</body>
</html>
http://plnkr.co/edit/hDFpQjh2T0MM2mp16w4e?p=preview
add도 마찬가지입니다.데이터의 트리 구조를 따릅니다.childs올바른 인덱스를 얻고 거기에 추가합니다.
언급URL : https://stackoverflow.com/questions/54709177/how-to-add-and-delete-the-data-in-nested-array-items-using-function-removingda
반응형
'programing' 카테고리의 다른 글
| Ionic Vue 체크박스 (0) | 2022.08.17 |
|---|---|
| long 2147483647 + 1 = -2147483648은 왜 길까요? (0) | 2022.08.17 |
| 롱 API 호출이 완료되기 전에 경로를 변경하면 vuex 저장소를 덮어씁니다. (0) | 2022.08.17 |
| C: 문자 포인터와 배열의 차이점 (0) | 2022.08.17 |
| C에서 상수/문자열을 연결하려면 어떻게 해야 합니까? (0) | 2022.08.17 |