Динамическое добавление и удаление div в компоненте Vue JS

Question

Я новичок в VueJS, и теперь я столкнулся с проблемой, которую просто не могу понять. Я хочу добавлять и удалять элементы динамически, нажимая кнопки. Как мне заставить это работать, чтобы я мог удалить указанный c div и не всегда последний, который я добавил. Я много играл с этим и теперь даже получаю сообщение об ошибке [Vue warn]: у вас может быть бесконечное обновление l oop в функции рендеринга компонента. Я, вероятно, не должен устанавливать div = index и вместо этого работать с div.id et c. Надеюсь, кто-то может помочь мне с этим. Спасибо.

https://jsbin.com/zuquwej/edit?html, js, вывод

  <div id="app">

    <div
      v-for="(div, index) in divs"
      :key="div.id"
      :div="div=index"
    >
      <div class="row">
        <div class="col-12">Div {{div}}</div>
      </div>

      <button
        class="btn btn-danger"
        @click="deleteRow(index)"
      >Delete</button>

    </div>

    <button
      class="btn btn-success"
      @click="addRow"
    >Add row</button>

  </div>

const app = new Vue({

  el: '#app',

 data() {
    return {
      div: 0,
      divs: []
    };
  },

  methods: {
    addRow() {
      this.divs.push({
        div: this.div
      });
      console.log(this.divs);
    },
    deleteRow(index) {
      this.divs.splice(index, 1);
    }
  }

})

Answer 1

Вы должны хранить индекс для каждого сгенерированного вами объекта и сохранять его в свойстве divs компонента. Кстати, в отличие от индекса массива, он не изменится, если вы склеите элемент из этого массива. Вот рабочий пример:

<div
      v-for="div in divs"
      :key="div.id"
    >
      <div class="row">
        <div class="col-12">Div {{ div.name }}</div>
      </div>

      <button
        class="btn btn-danger"
        @click="deleteRow(div.id)"
      >Delete</button>

    </div>

const app = new Vue({ 
  el: '#app',

  data() {
    return {
      index: 0,
      divs: []
    };
  },

  methods: {
    addRow() {
      this.divs.push({
        id: this.index,
        name: 'div' + this.index,
      });
      this.index++;
    },
    deleteRow(index) {
      this.divs.splice(index, 1);
    }
  }

})