title: With Vuejs, how to use a modal component inside a v-for loop the right way
body: <p>In my vue.js app, I need to display a list of items which the user can click.</p>
  
  <p>When clicked, each of these items should then fire a modal, containing additional information about the item that the user just clicked.</p>
  
  <p>What I have so far in my <code>Items.vue</code> component is:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="content"&gt;
          &lt;li v-for="item in items" class="list-item pa2 ba"&gt;
              &lt;div class="f5 pt2 pb2"&gt;
                  &lt;span&gt;{{item.name}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Items from '@/api/items';
  
      export default {
          name: 'items',
          asyncComputed: {
              items: {
                  async get() {
                      const items = await Items.getAll();
                      return items.data;
                  },
                  default: []
              }
          },
          components: {}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, I could simply add a modal component to the <code>v-for</code> loop, thus creating one modal for each item, but this does not seem ideal if, for example, I have a list of thousands of items.</p>
  
  <p>This led me to believe that the modal should probably be placed at the root of the app (in my case <code>App.vue</code>), like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;modal&gt;&lt;/modal&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app'
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and then somehow fired with custom data whenever I needed it.</p>
  
  <p>However, I'm not sure how to proceed. How do I fire this modal with custom information from inside the <code>v-for</code> loop, which is in a child component relative to <code>App.vue</code>?</p>