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?

I dont think you have access to the console object at that time.. Take a look here: stackoverflow.com/questions/51080447/… — Henrik Clausen
– Henrik Clausen, Commented Apr 26, 2021 at 11:37

ulou · Accepted Answer · 2021-04-26 12:00:16Z

2

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') }

edited Apr 26, 2021 at 12:00

answered Apr 26, 2021 at 11:54

ulou

5,9226 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steve Over a year ago

Thank you. Did not realize about the HTML render. Even when I move the clickHandler to the methods portion of the class it still does not fire. I suppose I asked the wrong question. The event does not fire, no matter how I attempt to do the v-on:click code. Any ideas?

ulou Over a year ago

Maybe you have production mode enabled in your webpack configuration file? If not, check configuration files for something like no-console.

Steve Over a year ago

'"watch": "webpack --watch --mode=development"' is how I am running. Do not have 'no-console' anywhere.

ulou Over a year ago

Is browser console says anything while you firing an event?

Steve Over a year ago

Well, it was my build going south. It works with your answer.

Collectives™ on Stack Overflow

Why is bootstrap-vue not rendering onclick?

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related