VueJS <b-modal> 内部组件不会在按钮单击时打开

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

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>

Answer 2

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

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

字面意思是 :v-b-modal.modal-some-id=""

这个点可能有问题。