CODEWITHSUNDEEP
vue.jsbootstrap-modalbootstrap-vue
AlyssaAlex
AlyssaAlex

Reputation: 716

How can change the name of the modal header of Vue js Bootstrap modal window?

<div>
  <b-btn v-b-modal="'productModal'" class="more_details_button" @click="chooseProduct(product)" product_item="'product'">More Info</b-btn>
</div>

<b-modal v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" modal-title="{{ chosenProduct.Name }}">...</b-modal>

This what I have above. I would like to change the name of the modal's title. chosenProduct() is one of my methods and Name is a column in my database. I am not sure how I could represent one of the data elements from my database in the field of modal-title. I have tried binding it, like :modal-title="chosenProduct.Name" but it doesn't seem to do anything. Would appreciate some help with this. Thanks!

Upvotes: 2

Views: 3919

Answers (1)

dreijntjens
dreijntjens

Reputation: 4835

The header is title in bootstrap-vue

<b-modal id="modal-1" title="BootstrapVue">
   <p class="my-4">Hello from modal!</p>
</b-modal>

You can make it reactive using v-bind

<b-modal id="modal-1" v-bind:title="chosenProduct.Name">
   <p class="my-4">Hello from modal!</p>
</b-modal>

Or shorter

<b-modal id="modal-1" :title="chosenProduct.Name">
   <p class="my-4">Hello from modal!</p>
</b-modal>

Upvotes: 6

Related Questions