VueJS <b-模态>内部组件按一下按钮就不会打开

Question

我使用vue-tables-2和bootstrap-vue。我已经创建了一个组件，它是vue-tables-2中的一个列，它由按钮和模式代码组成。

问题是这样，当你点击按钮的时候，模式是不会打开的，我不知道为什么。

编辑

我发现当我硬编码按钮属性时，它会工作。当v-b-modal.modal-something由vue生成时，它就不起作用了。

这是一个组成部分：

 Vue.component('vue-tables-2-product', {
        delimiters: ['[[', ']]'],
        props: ['data', 'index', 'column'],
        template: `<div>
                <b-modal v-bind="modal_attrs" title="BootstrapVue">
                    <p class="my-4">[[ this.data.name ]]</p>
                </b-modal>
                <b-button @click="log" v-bind="button_attrs">Detail</b-button></div>`,
        methods: {
            log: function () {
          console.log(this.data)
            }
        },
        computed: {
            button_attrs() {
                return {
                    [`v-b-modal.modal-${this.data.id}`]: "",
                }
            },

            modal_attrs() {
                return {
                    [`id`]: "modal-"+this.data.id,
                }
            },


        }

    })

这是vue应用程序的模板。

templates: {
        on_stock: 'boolean',
        is_active: 'boolean',
        name: 'vue-tables-2-product',
        import_export_price_diff: 'vue-tables-2-difference'
}

你知道问题出在哪里吗？

编辑：

我还试图将this.$bvModal.show(this.data.id)添加到log函数中，但没有发生任何事情。

我注意到

Answer 1

你不是把空字符串作为你的ID传递吗？这么做的原因是什么？

button_attrs() {
  return {
    [`v-b-modal.modal-${this.data.id}`]: "",
  }
},

字面意思是:v modal.mod- literally =“”

这个点可能会有问题。

Answer 2

Vue接受变量作为指令的修饰符(将它们放在方括号中)：

<div>
  <b-modal v-bind="modal_attrs" title="BootstrapVue">
    <p class="my-4">[[ this.data.name ]]</p>
  </b-modal>
  <b-button @click="log" v-b-modal.[modal_attrs.id]>Detail</b-button>
</div>