0

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?

Steve
  • 1,557
  • 2
  • 17
  • 34
  • 1
    I dont think you have access to the console object at that time.. Take a look here: https://stackoverflow.com/questions/51080447/how-can-i-use-console-error-or-console-log-in-a-vue-template – Henrik Clausen Apr 26 '21 at 11:37

1 Answers1

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') }
ulou
  • 5,542
  • 5
  • 37
  • 47
  • 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? – Steve Apr 26 '21 at 12:38
  • Maybe you have production mode enabled in your webpack configuration file? If not, check configuration files for something like `no-console`. – ulou Apr 26 '21 at 12:39
  • '"watch": "webpack --watch --mode=development"' is how I am running. Do not have 'no-console' anywhere. – Steve Apr 26 '21 at 12:41
  • Is browser console says anything while you firing an event? – ulou Apr 26 '21 at 12:41
  • Well, it was my build going south. It works with your answer. – Steve Apr 26 '21 at 12:47