Why is bootstrap-vue not rendering onclick?

Question

I have a bootstrap-vue b-button with a v-on:click tag. But the rendered HTML does not contain the onclick event. Here are the dependencies:

"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",

The button:

<b-button :disabled="document.status==='Complete' || document.status==='Canceled'"
                    variant="primary"
                    title="Resend"
                    v-on:click="console.log('click')"
                >

The rendered HTML:

<button title="Resend" type="button" class="btn btn-primary">...</button>

As seen above, the onclick is not rendered in the HTML. Why am I not getting my onclick?

Answer 1

v-on: (or just @) will create event listener, so it won't be visible in html anyway.

console refering to nothing (it's undefined, check your web console) while you doing it in html, inline. You can use global this, then it should work (this.console.log(...)).

Even better practice, try this:

<b-button :disabled="document.status==='Complete' || document.status==='Canceled'"
                    variant="primary"
                    title="Resend"
                    v-on:click="clickHandler"
                >

then in methods:

clickHandler() { console.log('clicked') }