title: Bootstrap-Vue Modal: How to open different modals in an V-For rendered list?
body: <p>I am using Bootstrap-Vue Modals to open an &quot;Edit&quot; modal when clicking the &quot;Edit&quot; button that is attached to each item I have rendered in a list from v-for rendered list.</p>
  <p>Each time, however, when I click on the edit button, it opens all of the modals, stacked on top of eachother with the last element in the list being the top modal.</p>
  <p>How can I specify it to only open the modal/information for the item that is clicked to be edited?</p>
  <pre><code>//Parent Component
  
  &lt;div class=&quot;dataList&quot;&gt;
   &lt;div v-bind:key=&quot;item.id&quot; v-for=&quot;item in this.$store.getters.data&quot;&gt;
      &lt;Child v-bind:item=&quot;item&quot;&gt;&lt;/Child&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  //Child Component
  &lt;div&gt;
        {{this.item.name}}
        {{this.item.details}}
        {{this.item.completedBy}}
        {{this.item.status}}
        &lt;button v-b-modal.modal-1&gt;Edit&lt;/button&gt;
        &lt;button v-on:click=&quot;deleteItem&quot;&gt;Delete&lt;/button&gt;
  
        &lt;div&gt;
          &lt;b-modal id=&quot;modal-1&quot; title=&quot;BootstrapVue&quot;&gt;
            &lt;form @submit=&quot;editItem&quot;&gt;
                &lt;input v-model=&quot;name&quot;&gt;
                &lt;input v-model=&quot;details&quot;&gt;
                &lt;input v-model=&quot;completedBy&quot;&gt;
                &lt;select v-model=&quot;status&quot;&gt;
                    &lt;option&gt;Fail&lt;/option&gt;
                    &lt;option&gt;Warn&lt;/option&gt;
                    &lt;option&gt;Pass&lt;/option&gt;
                &lt;/select&gt;&lt;br&gt;
                &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; @click=&quot;$bvModal.hide('modal-1')&quot;&gt;
            &lt;/form&gt;
          &lt;/b-modal&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  
  </code></pre>
  <p>Now each modal shows the correct information (like the proper name, details, status, etc), but I just need it only the specific modal.</p>
  <p>I imagine it has something to do with the 'v-b-modal.modal-1' but I'm not sure how to dynamically set the id of each modal...is there a way to easily set each modal id to match the item.id?</p>
  <p>Here is the documentation for Bootstrap-Vue Modals, but I wasn't to find what I needed.</p>