VueJS inside component won't open on button click

Question

I use vue-tables-2 and bootstrap-vue. I've created a component which is a column in vue-tables-2 and it consists of button and modal code.

The problem is that this way, the modal is not opening when you click on the button and I don't know why.

EDIT

I found out that when I hardcode buttons attribute,it works. It just doesn't work when v-b-modal.modal-something is generated by vue.

This is a component:

 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,
                }
            },


        }

    })

And this is templates from the vue app.

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

Do you know where is the problem?

EDIT:

I also tried to add this.$bvModal.show(this.data.id) into the log function and nothing happens.

I noticed that

score 0 · Answer 1 · answered Dec 31 '19 at 11:48

0

Aren't you passing empty string as your ID? What's the reason of doing this?

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

It's literally :v-b-modal.modal-some-id=""

This dot might be problematic tho.

answered Dec 31 '19 at 11:48

kkot

477
2
6
13

The problem is that it just doesn't work that way so I used normal button and @onclick this.$bvModal.show("modal-"+this.data.id) - now it works. I forgot to add "modal-" to tho argument :) – Milano Dec 31 '19 at 12:05

score 0 · Answer 2 · answered Jan 08 '20 at 22:24

Vue accepts variables as modifiers on directives (by placing them in square brackets):

<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>

VueJS inside component won't open on button click

2 Answers2