Electron+Vue项目中SFC元素v-on:click事件消失问题

环境与配置 #

我基于Electron Forge的Webpack + Typescript模板开发Electron项目，同时安装了Vue与vue-loader以支持单文件组件（SFC），vue-loader的Webpack配置如下：

{
  test: /\.vue$/,
  loader: 'vue-loader'
},

问题现象 #

此前项目运行正常，近期遇到异常：在Vue模板中给按钮添加@click或v-on:click后，执行electron-forge start启动项目，在开发者工具的元素面板中看不到该点击事件的绑定。

我的Vue模板代码如下：

<button v-for="item in logFilesList?.content"
class="abc" onmouseleave="alert('hi')" v-on:click="validateAndSubmit('item')"
>{{ item }}</button>

页面上的按钮确认为对应这段代码（通过class="abc"验证），原生onmouseleave事件可正常触发，但v-on:click未出现在元素属性中，按钮点击也无响应。我使用VS Code的Volar插件进行开发。

Webpack编译输出检查 #

查看Webpack编译输出后发现，点击事件实际已被正确编译：

((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("button", {
        class: "abc",
        onmouseleave: "alert('hi')",
        
onClick: _cache[0] || (_cache[0] = $event => 
($options.validateAndSubmit(item)))
      }, 
(0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item), 1 /* TEXT 
*/))

问题解决（更新） #

后来才发现是自己的误区：按钮点击无响应时，我误以为Vue的点击事件会像原生事件那样显示在元素属性列表里，完全忘了应该去开发者工具的Event-Listeners标签下查看——实际上事件已经被正确绑定。

内容的提问来源于stack exchange，提问作者Sander_P