I'm encountering a perplexing issue. I am currently in the process of creating a Wordpress plugin using Vue, but unfortunately, I am unable to establish functionality for the @click event.
<script>
export default {
name: "App",
methods: {
showPanel: function () {
console.log("Clicked!");
}
}
};
</script>
<template>
<div id="frontend-app" class="app">
<button @click="showPanel()">Test Button</button>
<!-- <router-view /> -->
</div>
</template>
Despite my efforts, I continue to receive the following warning and error message:
runtime-core.esm-bundler.js:179 [Vue warn]: Unhandled error during execution of native event handler
at <App>
Uncaught TypeError: $options.showPanel is not a function
at onClick._cache.<computed>._cache.<computed> (App.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B2%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B1%5D.rules%5B8%5D.use%5B0%5D:13:59)
at callWithErrorHandling (runtime-core.esm-bundler.js:296:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:304:17)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:437:82)
I utilized Vue.js 3 Plugin Generator to set up the WordPress plugin, which may be pertinent information. Additionally, this Vue application has been constructed with Webpack.
If you have any insights or suggestions, please share. I have exhaustively scoured resources and attempted various solutions without success.
Thank you