Vue JS 组件中动态添加和移除 div 元素

Question

我刚接触VueJS，现在遇到一个我无法解决的问题。我想通过点击按钮动态添加和删除元素。如何让这个工作，以便我可以删除特定的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);
    }
  }

})

- The_Ice_Man_cometh

---

“div = index” 这一部分的作用是什么？ - Etheryte

一种不必要的方式，最终获取并存储divs数组中的索引值...我猜。 - The_Ice_Man_cometh

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

})

- Shizzen83

---

谢谢@Shizzen83，这对我帮助很大，现在一切都正常了。关于删除特定div，我现在将其更改为deletedRow（id）和this.divs = this.divs.filter(d => d.id !== id);。 - The_Ice_Man_cometh

不错，干得好 :) 我建议您使用 Lodash（特别是 lodash/fp）来完成此类任务 https://gist.github.com/jfmengels/6b973b69c491375117dc - Shizzen83

要删除特定的 div，我会这样做： 1- 获取 div 在 divs 数组中的索引 const divIndex = this.divs.findIndex((div) => div.id === id); 2- 然后将它删掉 this.divs.splice(divIndex, 1); - Nasser Albelbeisi