为什么在我的 BootstrapVue 中模态为空并且 selectedItem 为空

Question

我是 BootstrapVue 的新手，不确定我做的是否正确。我正在使用 BootstrapVue 创建一个带有数量输入的可编辑表格，当单击表格行时，它将显示项目图像模式。 （使用

<%%>

而不是

{{}}

因为 jinja2 迷恋）

根据我下面的代码，模态没有显示任何内容，

selectedItem

为空。

我的模板：

<b-table :items="items" :fields="fields" @row-clicked="showImage" responsive striped hover>
    <template #cell(quantity)="data">
        <b-form-input type="number" :value="data.value" v-model="data.item.quantity" max="9999"
                                      min="0"></b-form-input>
    </template>
    <template #cell(total)="data">
        <% getItemTotal(data.item) %>
    </template>

    <template slot="bottom-row" slot-scope="data">
        <td>Total</td>
        <td><% countTotal %></td>
    </template>
</b-table>

<b-modal v-model="showModal" @hidden="resetModal">
    <img v-if="selectedItem && selectedItem.image" :src="selectedItem.image" alt="Selected Item"
                         class="img-fluid">
</b-modal>

我的剧本：

window.app = new Vue({
    el: '#app',
    data: {
            items: {{ distributorProductsFormatted|safe }},
            fields: [
                {key: 'category', label: 'Category'},
                {key: 'description', label: 'Description'},
                {key: 'price', label: 'Price (USD)'},
                {key: 'discount', label: 'Discount'},
                {key: 'quantity', label: 'Quantity'},
                {key: 'total', label: 'Total'},
                {key: 'image', label: 'Image'},
            ],
            showModal: false,
            selectedItem: null,
        },
   methods: {
            showImage(event) {
                this.selectedItem = event.item
                this.showModal = true
            },
            resetModal() {
                this.selectedItem = null
            }
        },
    delimiters: ['<%', '%>'],
    })

任何建议都会有所帮助。