Как изменить имя модального заголовка модального окна Vue js Bootstrap? - PullRequest
Новая
       12

Как изменить имя модального заголовка модального окна Vue js Bootstrap?

1 голос
/ 30 сентября 2019 
<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>

Это то, что я имею выше. Я хотел бы изменить название заголовка модала. chosenProduct() - это один из моих методов, а Name - это столбец в моей базе данных. Я не уверен, как я мог бы представить один из элементов данных из моей базы данных в поле modal-title. Я пытался связать его, как :modal-title="chosenProduct.Name", но он, похоже, ничего не делает. Был бы признателен за помощь с этим. Спасибо!

1 Ответ

2 голосов
/ 30 сентября 2019

Заголовок заголовка в bootstrap-vue 

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

Вы можете сделать его реактивным, используя v-bind 

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

Или короче 

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