为啥 bootstrap-vue 不渲染 onclick？

Posted 2023-02-23

【中文标题】为啥 bootstrap-vue 不渲染 onclick？

【英文标题】：Why is bootstrap-vue not rendering onclick?为什么 bootstrap-vue 不渲染 onclick？

【发布时间】：2021-07-19 18:41:50

【问题描述】：

我有一个带有 v-on:click 标签的 bootstrap-vue b-button。但呈现的 html 不包含 onclick 事件。以下是依赖项：

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

按钮：

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

呈现的 HTML：

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

如上所示，onclick 不会在 HTML 中呈现。为什么我没有点击？

【问题讨论】：

我认为您当时无法访问控制台对象.. 看看这里：***.com/questions/51080447/…

【参考方案1】：

v-on:（或只是@）将创建事件监听器，因此无论如何它不会在 html 中可见。

console 当你在 html 中内联时，什么都没有（它是未定义的，检查你的 web 控制台）。您可以使用全局this，然后它应该可以工作（this.console.log(...)）。

更好的做法，试试这个：

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

然后在方法中：

clickHandler()  console.log('clicked') 

【讨论】：

谢谢。没有意识到 HTML 渲染。即使我将 clickHandler 移动到类的方法部分，它仍然不会触发。我想我问错了问题。无论我如何尝试执行 v-on:click 代码，该事件都不会触发。有什么想法吗？

也许你的 webpack 配置文件中启用了生产模式？如果没有，请检查配置文件中的 no-console 之类的内容。

'"watch": "webpack --watch --mode=development"' 是我的运行方式。不要在任何地方使用“无控制台”。

在您触发事件时浏览器控制台是否显示任何内容？

嗯，这是我的构建向南。它适用于您的答案。