Nuxt 3 moduel component: too much recurson error-CodePudding

I am building a Nuxt 3 module which has a simple button component. When the button is clicked, a boolean gets flipped. The logic for the variable is in a different file, and I am using pinia as a store.

This is the code for the store:

import { defineStore } from "pinia"

export const getLogic = defineStore('logic', {
  state: () => {
    return{
      status: false,
    }
  },
  actions: {
    flip() {
      this.status = !this.status
    },
  },
  getters: {
    getStatus() { return this.status }
  }
})

And this is the code for the button component:

<template>
  <button onClick="logic.flip()">
    <slot />
  </button>
</template>


<script lang="ts">
import { getLogic } from "../../stores/logic"

export default {
  setup() {
    const logic = getLogic()
    return { logic }
  } 
}
</script>

I am testing the module with the "playground environment" and call the button component as such:

<template>
  <Button >
    Button
  </Button>
</template>

When I now click on the button component I get the following error in the browser console:

Uncaught InternalError: too much recursion
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:162
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174

which is slightly confusing to me, since I am not using any recursion in my logic.
How can I work around or fix this problem?

CodePudding user response：

In that case, it should be @click="logic.flip".