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>

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

1 个答案: