在Vue JS组件中动态添加和删除div

Question

我是VueJS的新手，现在遇到了一个我无法解决的问题。我想通过单击按钮动态添加和删除元素。如何使它起作用，所以我可以删除特定的div，而不能总是删除我添加的最后一个div。我经常玩这个游戏，现在甚至出现错误[Vue警告]：组件渲染函数中可能存在无限的更新循环。我可能不应该设置div = index，而应该使用div.id等。希望有人可以帮助我。谢谢。

https://jsbin.com/zuquwej/edit?html,js,output

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

})