4

I want to delete the nested array 'Men' in the items. And also I want to add the new data inside the nested array 'Human' using the function addingData and removingData. I have tried slice and pop function but that didn't work on child

This is html code

<!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>

This is javascript code 

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);
    }
  }
})

If someone could take a look I would really appreciate it!

Improve this question

3 Answers 3

Reset to default
1

Vue.delete is for Objects, not for arrays. you need Array.splice. so i made your code to work:

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Ideally you would use recursion in both the markup and the methods rather than hard coded structure, but this answer may be a better illustration of the problem.
0

Try creating a function according to each loop. You can send the object and modify it inside the function. I left an example with the console log. I hope it will help you to give you a starting point. 

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>

Improve this answer

Comments

0

Your indexing is off

Vue.delete(this.items[0].childs[0].childs, 0);

EDIT: how to find

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

Same for add, follow the tree structure of the data using childs to get the correct index, and add there

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.