title: Multiple modal components with Vue
body: <p>I am having trouble implementing dynamic modal component in Vue.</p>
  
  <p>A common approach I follow to display a set of data fetched from the db is I dump each of the rows in an HTML table element by iterating over each of the row of the db result. Something like this: <a href="https://i.stack.imgur.com/t0hdY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t0hdY.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the screenshot, each of the rows has one or more buttons which are dynamically generated by the loop.
  In order to bind a modal component to each of the buttons (say the Remove buttons in this scenario) I do something like this.<br/>
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;?php foreach($result as $x): ?&gt;
          &lt;modal v-if="showModal"&gt;I am Modal $x&lt;/modal&gt;
          &lt;btn @trigger="onShowModal"&gt;Button $x&lt;/btn&gt;
      &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So if I have three rows in my result, the aforementioned block of code will take the shape of something like this:</p>
  
  <pre><code>&lt;div id="app"&gt;
          &lt;modal v-if="showModal"&gt;I am Modal 1&lt;/modal&gt;
          &lt;btn @trigger="onShowModal"&gt;Button 1&lt;/btn&gt;
  
          &lt;modal v-if="showModal"&gt;I am Modal 2&lt;/modal&gt;
          &lt;btn @trigger="onShowModal"&gt;Button 2&lt;/btn&gt;
  
          &lt;modal v-if="showModal"&gt;I am Modal 3&lt;/modal&gt;
          &lt;btn @trigger="onShowModal"&gt;Button 3&lt;/btn&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is what I do in the JavaScript end:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>    Vue.component('btn',{
        template: `&lt;button @click="$emit('trigger')"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/button&gt;`,
      });
  
      Vue.component('modal',{
        template: `&lt;p&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/p&gt;`,
      });
  
      new Vue({
        el: '#app',
        data: {
          showModal: false
        },
        methods: {
          onShowModal(){
            this.showModal = true;
          }
        }
      });
  </code></pre>
  
  <p>The problem with this approach is, when I click any one of the Remove buttons, I get a 'stack' of modals instead of the modal I wanted to view. And that's because I am setting <code>showModal</code> to <code>true</code> and if you see the populated HTML block you will see that each of the modals is set to <code>v-if="showModal"</code>.</p>
  
  <p><a href="http://jsbin.com/vikilepela/edit?html,output" rel="noreferrer">Click here to see a demo</a></p>
  
  <p>And as I am beginning to understand frontend-backend relationship, I am learning that this pattern is appearing more frequently in an application. How do I fix this issue (with a very vue-beginner-friendly level)?</p>