如何删除动态添加的部分中的子部分

Question

你好，我接管了vue项目，现在我正在开发动态添加和延迟部分的模块。每个部分都有opton来割让元素，也由v-for。我的问题是，用于延迟的按钮不知道在哪个部分中存在。

症状:在第一部分，我添加了3个元素，控制台返回this.$ref.index > (3) tr，我创建了另一个部分，添加了一个elemnt，然后this.$ref.index > (4) tr，tr，

我不应该像那样吗？你有什么ide吗?如何比较正确的部分

组件可视化

Answer 1

基于您给定的布局可视化，我认为元素的结构应该是：

Main (adds Sestions and listens for Sestion removal)
  Sestion (adds Elements, listens for Element removal, emit remove event)
    Element (emit remove event)
    Element
  Sestion
    Element
    Element

代码应该如下所示：

/** Sestion.vue **/
<template>
  <div>
    <ElementCard
      v-for="(element, index) in elements"
      :key="index"
      @remove="onRemoveElement(index)"
    />

    <button @click="onAddElement">
      Add
    </button>

    <button @click="$emit('remove')">
      Remove
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elements: []
    }
  },

  methods: {
    onAddElement() {
      this.elements.push();
    },

    onRemoveElement(index) {
      this.elements.splice(index, 1)
    }
  }
}
</script>