I'm building a small vue application where among other things it is possible to delete an entry of a music collection. So at this point I have a list of music albums and next to the entry I have a "delete" button. When I do the following:

<li v-for="cd in cds">
   <span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button>
</li>

and then in my methods do:

deleteAlbum(id){   
 this.$http.delete('/api/cds/delete/'+id)
    .then(function(response){
        this.fetchAll()
    // });
},

this works fine so far, but to make it more nice, I want the delete functionality to appear in a modal/popup, so I made the following changes:

<li v-for="cd in cds">
   <div class="cd-wrap">
     <span>{{cd.artist}} - {{cd.album}}</span>
     <button @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" class="btn">Delete</button>
   </div>
  <delete-modal v-if="showDelete" @close="showDelete = false" @showDeleteModal="cd.ID = $event"></delete-modal>
</li>

so, as seen above I created a <delete-modal>-ponent. When I click on the delete button I want to pass the data from the entry to <delete-modal> ponent with the help of an eventbus. For that, inside my methods I did this:

showDeleteModal(item) {
  this.showDelete = true
  eventBus.$emit('showDeleteModal', {item: item})
}

Then, in the <delete-modal>, inside the created()-lifecycle I did this:

created(){
  eventBus.$on('showDeleteModal', (item) => {
    console.log('bus data: ', item)
  })  
}

this gives me plenty of empty opened popups/modals!!??

Can someone tell me what I'm doing wrong here?

** EDIT **

After a good suggestion I dumped the eventBus method and pass the data as props to the <delete-modal> so now it looks like this:

<delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"></delete-modal>

and the delete-modal ponent:

export default {
   props: ['id', 'artist', 'album'],
   data() {
     return {
        isOpen: false
     }
   },
   created(){
     this.isOpen = true
   }

}

Only issue I have now, is that it tries to open a modal for each entry, how can I detect the correct ID/entry?

I'm building a small vue application where among other things it is possible to delete an entry of a music collection. So at this point I have a list of music albums and next to the entry I have a "delete" button. When I do the following:

<li v-for="cd in cds">
   <span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button>
</li>

and then in my methods do:

deleteAlbum(id){   
 this.$http.delete('/api/cds/delete/'+id)
    .then(function(response){
        this.fetchAll()
    // });
},

this works fine so far, but to make it more nice, I want the delete functionality to appear in a modal/popup, so I made the following changes:

<li v-for="cd in cds">
   <div class="cd-wrap">
     <span>{{cd.artist}} - {{cd.album}}</span>
     <button @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" class="btn">Delete</button>
   </div>
  <delete-modal v-if="showDelete" @close="showDelete = false" @showDeleteModal="cd.ID = $event"></delete-modal>
</li>

so, as seen above I created a <delete-modal>-ponent. When I click on the delete button I want to pass the data from the entry to <delete-modal> ponent with the help of an eventbus. For that, inside my methods I did this:

showDeleteModal(item) {
  this.showDelete = true
  eventBus.$emit('showDeleteModal', {item: item})
}

Then, in the <delete-modal>, inside the created()-lifecycle I did this:

created(){
  eventBus.$on('showDeleteModal', (item) => {
    console.log('bus data: ', item)
  })  
}

this gives me plenty of empty opened popups/modals!!??

Can someone tell me what I'm doing wrong here?

** EDIT **

After a good suggestion I dumped the eventBus method and pass the data as props to the <delete-modal> so now it looks like this:

<delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"></delete-modal>

and the delete-modal ponent:

export default {
   props: ['id', 'artist', 'album'],
   data() {
     return {
        isOpen: false
     }
   },
   created(){
     this.isOpen = true
   }

}

Only issue I have now, is that it tries to open a modal for each entry, how can I detect the correct ID/entry?

• javascript
• vue.js
• vuejs2

• 1 Any reason why you use an event bus for this. Can't you just pass the info down to the delete-modal ponent as a prop? – Imre_G Commented Mar 12, 2018 at 10:10
• @Imre_G Yes, trying right now :-) Feel free to check out my edit in the question – ST80 Commented Mar 12, 2018 at 10:27

1 Answer 1

I am going to show you how to do it with props since it is a parent-child relation.I will show you a simple way of doing it.You need to modify or add some code of course in order to work in your app.

Parent ponent

<template>
    <div>
       <li v-for="cd in cds" :key="cd.ID">
         <div class="cd-wrap">
           <span>{{cd.artist}} - {{cd.album}}</span>
           <button 
              @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" 
              class="btn"
           >
            Delete
           </button>
         </div>

         <delete-modal v-if="showDelete" :modal.sync="showDelte" :passedObject="objectToPass"></delete-modal>
       </li>
    </div>
</template>
<script>
import Child from 'Child'
    export default {
        ponents: {
            'delete-modal': Child
        },
        data() {
            return {
                showDelete: false,
                objectToPass: null,
                //here put your other properties
            }
        },
        methods: {
            showDeleteModal(item) {
              this.showDelete = true
              this.objectToPass = item
            }
        }
    }
</script>

Child Component

<template>
    /* Here put your logic ponent */
</template>
<script>
    export default {
        props: {
            modal:{
                default:false
            },
            passedObject: {
                type: Object
            }
        },
        methods: {
            closeModal() { //the method to close the modal
                this.$emit('update:modal')
            }
        }
        //here put your other vue.js code

    }
</script>

When you use the .sync modifier to pass a prop in child ponent then,there (in child cmp) you have to emit an event like:

this.$emit('update:modal')

And with that the modal will close and open.Also using props we have passed to child ponent the object that contains the id and other stuff.

If you want to learn more about props, click here