如何更改Vue js Bootstrap模态窗口的模态头名称？

Question

<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"似乎没有任何作用。希望得到一些帮助。谢谢！

Answer 1

标题是 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>