Как добавить и удалить данные во вложенном массиве «items» с помощью функции RemovalData - PullRequest
Новая
       0

Как добавить и удалить данные во вложенном массиве «items» с помощью функции RemovalData

0 голосов
/ 15 февраля 2019

Я хочу удалить вложенный массив 'Men' в элементах.А также я хочу добавить новые данные во вложенный массив «Человек», используя функцию добавление данных и удаление данных.Я пробовал функцию слайс и поп, но это не сработало на ребенка

Это 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);
    }
  }
})

Если кто-то могпосмотрите, я бы очень признателен!

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

Vue.delete для объектов, а не для массивов.вам нужно Array.splice.поэтому я заставил ваш код работать:

https://jsfiddle.net/efrat19/t95vs0yd/

<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(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}}
0 голосов
/ 15 февраля 2019

Попробуйте создать функцию в соответствии с каждым циклом.Вы можете отправить объект и изменить его внутри функции.Я оставил пример с консольным журналом.Я надеюсь, что это поможет вам дать вам отправную точку.

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>
0 голосов
/ 15 февраля 2019

Ваша индексация выключена

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

То же самое длядобавить, следуйте древовидной структуре данных, используя childs, чтобы получить правильный индекс, и добавьте туда

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...