title: VueJS How to pass data to a modal component using eventbus
body: <p>I'm building a small <code>vue</code> 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:</p>
  
  <pre><code>&lt;li v-for="cd in cds"&gt;
     &lt;span&gt;{{cd.artist}} - {{cd.album}}&lt;/span&gt; &lt;button v-on:click="deleteAlbum(cd.ID)"&gt;Delete&lt;/button&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and then in my methods do:</p>
  
  <pre><code>deleteAlbum(id){   
   this.$http.delete('/api/cds/delete/'+id)
      .then(function(response){
          this.fetchAll()
      // });
  },
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;li v-for="cd in cds"&gt;
     &lt;div class="cd-wrap"&gt;
       &lt;span&gt;{{cd.artist}} - {{cd.album}}&lt;/span&gt;
       &lt;button @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" class="btn"&gt;Delete&lt;/button&gt;
     &lt;/div&gt;
    &lt;delete-modal v-if="showDelete" @close="showDelete = false" @showDeleteModal="cd.ID = $event"&gt;&lt;/delete-modal&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>so, as seen above I created a <code>&lt;delete-modal&gt;</code>-component. When I click on the delete button I want to pass the data from the entry to <code>&lt;delete-modal&gt;</code> component with the help of an eventbus. For that, inside my methods I did this:</p>
  
  <pre><code>showDeleteModal(item) {
    this.showDelete = true
    eventBus.$emit('showDeleteModal', {item: item})
  }
  </code></pre>
  
  <p>Then, in the <code>&lt;delete-modal&gt;</code>, inside the <code>created()</code>-lifecycle I did this:</p>
  
  <pre><code>created(){
    eventBus.$on('showDeleteModal', (item) =&gt; {
      console.log('bus data: ', item)
    })  
  }
  </code></pre>
  
  <p>this gives me plenty of empty opened popups/modals!!??</p>
  
  <p>Can someone tell me what I'm doing wrong here?</p>
  
  <p>** EDIT **</p>
  
  <p>After a good suggestion I dumped the eventBus method and pass the data as props to the <code>&lt;delete-modal&gt;</code> so now it looks like this:</p>
  
  <pre><code>&lt;delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"&gt;&lt;/delete-modal&gt;
  </code></pre>
  
  <p>and the delete-modal component:</p>
  
  <pre><code>export default {
     props: ['id', 'artist', 'album'],
     data() {
       return {
          isOpen: false
       }
     },
     created(){
       this.isOpen = true
     }
  
  }
  </code></pre>
  
  <p>Only issue I have now, is that it tries to open a modal for each entry, how can I detect the correct ID/entry?</p>