title: Multiple modal popups vue.js
body: <p>I am currently using Vue.JS in a research project at work.</p>
  
  <p>At the moment I am working primarily on the front-end side of things. I have a table with a few entries, and on click of the row, I want a modal popup window to appear with further details of that row.</p>
  
  <p>I am just trying to get the multiple popups working, and will work on the dynamic content within each one once this is working correctly.</p>
  
  <p>At the moment the top row is working as seen below:</p>
  
  <pre><code>&lt;tr class="activate-popupmodal-tr" @click="showmodal = true"&gt;
                        &lt;td&gt;01/01/2016
  
                          &lt;modal :show.sync="showmodal"&gt;
  
                            &lt;h3 slot="header"&gt;
                              Bug #1 - &lt;span&gt; 04/07/2016 &lt;/span&gt;
  
                              &lt;img src="files/cross.jpg" @click="showmodal = false" /&gt;
                            &lt;/h3&gt;
  
  
                            &lt;div slot="body"&gt;
                            &lt;/div&gt;
  
                            &lt;div slot="footer"&gt;
                           &lt;/div&gt;
  
                          &lt;/modal&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>With app.js as:</p>
  
  <pre><code>Vue.component('modal', {
    template: '#dashboard-popup-template',
    props: {
      show: {
        type: Boolean,
        required: true,
        twoWay: true
      }
    }
  })
  
  new Vue({
    el: '.activate-popupmodal-tr',
    data: {
      showmodal: false
    }
  })
  </code></pre>
  
  <p>This works, but only on one row.
  Any idea on how I can get this to work?</p>
  
  <p>Table: <a href="https://jsfiddle.net/a6n04o3t/" rel="nofollow">https://jsfiddle.net/a6n04o3t/</a></p>