Vue3开发WordPress插件：@click触发报错$options.showPanel不是函数求助

可能的原因与解决方案 #

1. 修正模板事件绑定写法

报错提示$options.showPanel is not a function，大概率是模板中事件绑定的写法问题。在Vue中，直接绑定方法名即可，不需要额外加括号（加括号会导致方法在组件渲染时立即执行，而非点击触发）。

修改后的代码：

<template>
  <div id="frontend-app" class="app">
    <button @click="showPanel">Test Button</button>
    <!-- <router-view /> -->
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    showPanel() {
      console.log("Clicked!");
    }
  }
};
</script>

2. 改用Vue 3组合式API（推荐）

Vue 3的组合式API（<script setup>语法）更简洁，且不易出现这类绑定问题，适合新项目使用：

<template>
  <div id="frontend-app" class="app">
    <button @click="showPanel">Test Button</button>
    <!-- <router-view /> -->
  </div>
</template>

<script setup>
const showPanel = () => {
  console.log("Clicked!");
};
</script>

3. 检查Webpack构建配置适配性

由于你使用Webpack构建Vue应用，需要确保依赖版本适配Vue 3：

• 确认vue-loader版本≥16.x，@vue/compiler-sfc版本与Vue 3主版本一致
• Webpack配置中正确引入VueLoaderPlugin：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

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