title: How to programmatically inject content in bootstrap-vue modal body and footer?
body: <p>I want to implement this functionality in vuejs app using <a href="https://bootstrap-vue.js.org/docs/components/modal" rel="noreferrer">bootstrap vue modal component</a>:</p>
  
  <p>When the user clicks on the Delete button on the page UI :</p>
  
  <ul>
  <li><p>It shows the modal with a dynamic content in its body:
  "Are you sure you want to delete customer:
  customer_name_here"</p></li>
  <li><p>If the user clicks on the 'Cancel' button: The modal goes away.</p></li>
  <li><p>If the user clicks on the 'OK' button:</p></li>
  <li><p>It changes the modal body content to:
  'Deleting customer 'customer_name_here' ...
  , it disables the Cancel and OK buttons and it calls the API to delete the customer. </p></li>
  </ul>
  
  <p>When successful response is received from the API: </p>
  
  <ul>
  <li>It changes the modal body content to:
  'Successfully deleted customer 'customer_name_here'</li>
  <li>Display only the OK button in the modal footer, which if clicked modal goes away. </li>
  </ul>
  
  <p>This the code so far:</p>
  
  <pre><code> &lt;b-button   v-b-modal.modal1  variant="danger"&gt;Delete&lt;/b-button&gt;
  
      &lt;b-modal id="modal1" title="Delete Customer" 
  @ok="deleteCustomer" centered no-close-on-backdrop -close-on-esc ref="modal"&gt;
          &lt;p class="my-4"&gt;Are you sure, you want to delete customer:&lt;/p&gt;
          &lt;p&gt;{{customer.name}}&lt;/p&gt;
        &lt;/b-modal&gt;
  </code></pre>
  
  <p>Vue JS code:</p>
  
  <pre><code>deleteCustomer(evt) {
  
        evt.preventDefault()
        this.$refs.modal.hide()
  
        CustomerApi.deleteCustomer(this.customer.id).then(response =&gt; {
            // successful response
          })
  </code></pre>