0

我使用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函数中，但没有任何反应。

我注意到

4

2 回答 2

0

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

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

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

这个点可能有问题。

于 2019-12-31T11:48:15.110 回答
0

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>
于 2020-01-08T22:24:33.887 回答