Vue : Uncaught TypeError: _ctx.toPage is not a function

Question

when I clicked the button: it shows Uncaught TypeError: _ctx.toPage is not a function how can I fix this bug? please help me error pic

   <li v-for="pageLi of pageLis" :key="pageLi.id">
      <c-button @click="toPage(pageLi.path)">{{ pageLi.name }}</c-button>
    </li>


export default {
    setup() {
      const router = useRouter();
      const toPage = (path: string) => router.push(path);
      return {
        toPage,
      };
    },
  },
};

Answer 1

The expected way to deal with Event Handling is to register an event handler with an inline handler or method handler (via the component methods property). See Event Handling for more details.

However, even in what you're trying to do in this example, you should notice that the DOM is not available until the mounted state in the Vue Lifecyle. See Lifecyle Hooks for more details.

Finally, from this code sample, it looks like you're trying to do either Dynamic Route Matching or Programmatic Navigation? If so, the Vue Router documentation is your friend.