how remove children form dynamicly added sections

user_15417130 0
Viewed 46

Hello I took over the vue project and right now i'm working on module that dynamicly adds and delate sections. Each section has opton to ceate elements also by v-for. My problem is that buttons for delateing elemnts don't konw in which section exists.

symptoms: In first section i'm adding 3 elements and console returns this.$ref.index > (3) [tr, tr, tr] nex i'm creating another section and adding one elemnt then clg shows this.$ref.index > (4) [tr, tr, tr, tr,]

i't should't be like that righ? do you have any ide how to compare elemnts with right sections

Visualisation of components

vue.js
1 Answers

Based on your given visualization of layout, I believe the structure of your element should be:

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

the code would look something like this:

/** 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>
user_109757090
Related