Problem with adding and removing elements from dynamically added component in Vue

user_15417130 0
Viewed 150

I'm wondering how to add and remove specific elements from dynamically added sections. I'm fighting with it for a week and can't find the solution for my case.

Problem is clearly described in the images. To sum up the biggest problem is that the removing buttons don't know to which element they belong.

<template>
  <div>

    <div class="section" v-for="(el, index) in sections" :key="index" >
      
      <td>
        SECTION:{{index}}  
        
        <div class="element" v-for="(sel, index) in sections" :key="index">
         <span>PICK UP YOUR ANIMAL</span>
          <select >           
            <option v-for="(item, index) in zoo" :key="index" v-bind:value="item">
              <option>{{item.name}}</option>
            </option>          
          </select>
          <button class="rem el" @click='removeElement(index, el)'>-</button> 
        
        </div>
      
      </td> 
      
      <button  class="addEleme" @click='addElement'>add element</button> 
      <button class="rem sec" @click='removeSection'>-</button>
   
    </div>
    
    <button class="addSect" @click='addSection'>add section</button>
    <p>{{test}}</p>
    <span>{{sections}}</span>
    <span>{{elements}}</span>
 
  </div>

</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        zoo: [
            {name: "Crocodyle Sara"},
            {name: "Elepfhant Mike"},
            {name: "Lion Monika"},
            {name: "Shark Robert"},
            {name: "Zebra Antony"} 
        ],
        sections:[],
        elements:[],
        test:"",
        i:1
        
      }
    },
    methods:{

// Sections meth   
//----------------------------------------//
      addSection(){
        this.sections.push(this.zoo)
        this.i+=1
        this.test=`gucci: check console`
        console.log('this.sections: ', this.sections);
      },
       removeSection(index){
        this.sections.splice(index, 1)
        this.test="remove section"  
      },

// Elemnts meth       
//----------------------------------------//
      addElement(){
        this.test=`not gucci: should add element`
      },
      removeElement(index){
        this.elements.splice(index, 1)
        this.test="not gucci should remove element"
      }

    }
  }
</script>

problem explenation

vuejs2 vue.js javascript
1 Answers

Take a look in following simple solutions with another component:

Vue.component('mySelect', {
  template: `
    <div>
    <select v-model="selected" @change="selectAnimal"> 
      <option disabled value="">Please select one</option>
      <option v-for="(item, index) in zoo" :key="index" v-bind:value="item">
        {{item.name}}
      </option>          
    </select>
    <button class="rem el" @click='remove'>remove element</button>
    </div>
  `,
  props: ['idx', 'el'],
  data() {
    return {
      zoo: [{name: "Crocodyle Sara"}, {name: "Elepfhant Mike"}, {name: "Lion Monika"}, {name: "Shark Robert"}, {name: "Zebra Antony"}],
      selected: ''
    }
  },
  methods: {
    selectAnimal() {
      const obj = {id: this.el, ...this.selected}
      this.$emit('sel', obj)
    },
    remove() {
      const obj = {idx: this.idx, el: this.el}
      this.$emit('rem', obj)
    }
  }
})
new Vue({
  el: "#demo",
  data() {
    return {
      sections: [],
      selected: []
    }
  },
  methods:{
    newId() {
      return Math.floor(Date.now() / 1000)
    },
    addSection(){
      this.sections.push({id: this.newId(), elements: [this.newId()]})
    },
    removeSection(index){
      this.sections.splice(index, 1) 
    },
    addElement(idx){
      const nr = this.sections[idx].elements.length
      this.sections[idx].elements.push(this.newId())
    },
    removeElement(obj){
      const elems = this.sections[obj.idx].elements
      const element = elems.find(e => e === obj.el)
      this.selected = this.selected.filter(f => f.id !== element)
      this.sections[obj.idx].elements = elems.filter(e => e !== element)
    },
    handleSelect(sel) {
      const found = this.selected.find(s => s.id === sel.id)
      this.selected = this.selected.map(x => (x.id === sel.id) ? sel : x)
      if (!found) this.selected.push(sel)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul class="section" v-for="(section, index) in sections" :key="index" >
      SECTION:{{section.id}}  
      <li class="element" v-for="(element, idx) in section.elements" :key="idx">
        <span>PICK UP YOUR ANIMAL {{element}}</span>
        <my-select :el="element" :idx="index" @sel="handleSelect" @rem="removeElement"></my-select>
      </li>
    <button class="addEleme" @click='addElement(index)'>add element</button> 
    <button class="rem sec" @click='removeSection(index)'>remove section</button>
  </ul>
  <button class="addSect" @click='addSection'>add section</button>
  <p>Sections: {{ sections }}</p>
  <p>Selected: {{ selected }}</p>
</div>

user_119891890
Related