Trouble communicating with child component in Vue 3.0 - no event received

I have a button component that acts as a child component

<template>
  <div class="button-container">
    <el-button @click="$emit('onClick')" type="primary">{{ text }}</el-button>
  </div>
</template>

I am trying to emit the click event so that the parent component can receive it.

Here is the parent component

<script>
import Button from "@/components/Button.vue"; 

export default { 
  components: { Button } ,
  methods: {
    toRegister() { this.$router.push('/register'); }
  }
}
</script>
<template>
   <Button @on-click="toRegister" text="Register here" textColor="#5fb878" textSize="8px"></Button>
</template>

However, I am not receiving any response from the child component.

I initially thought the issue was with the event name, but even after changing it from onClick to clicked, the problem persists.

Answer №1

Consider changing the name of your custom component from Button to something different:

const { ref } = Vue

const app = Vue.createApp({
  methods: {
    toRegister() { 
    console.log('clicked')
    //this.$router.push('/register'); 
    }
  }
})

app.component('btn', {
  template: `
    <div class="button-container">
      <button @click="$emit('onClick')" type="primary">text</button>
    </div>
  `
})

app.mount('#demo')
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <btn @on-click="toRegister" text="Register here" textColor="#5fb878" textSize="8px"></btn>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining objects in Angular Javascript by merging arrays

How can I merge matching objects from 2 array objects in Angular JS? Array 1: [ {"id":1,"name":"Adam"}, {"id":2,"name":"Smith"}, {"id":3,"name":"Eve"}, {"id":4,"name":"Gary"}, ] Array 2: [ {"id":1,"name":"Adam", "checked":true}, ...

Marker on Google Maps in Dark Mode is not displaying properly

I have integrated a custom map into my website using the npm module called google-map-react. The provided tutorial demonstrates how to implement a basic marker on the map, and you can find it here: . Here is an example of what it should look like: import ...

Encountering difficulties launching development server for Next.js 14 using the latest version of Yarn Berry

I'm encountering an issue when trying to run the development server in nextjs 14 using yarn. It works perfectly fine with pnpm and npm, but I am facing this problem only with yarn The error message: E:/Programming/TM/test/.yarn/__virtual__/next-virtu ...

The note-taking app's JavaScript code does not currently have the capability to store notes in local storage

const noteContainer = document.querySelector(".note-container"); const createBtn = document.querySelector(".btn"); let notes = document.querySelectorAll(".input-box"); function showNotes() { noteContainer.innerHTML = localS ...

How to adjust the "skipNatural" boolean in AngularJS Smart-Table without altering the smart-table.js script

Looking to customize the "skipNatural" boolean in the smart-table.js file, but concerned about it being overwritten when using Bower for updates. The current setting in the Smart-Table file is as follows: ng.module('smart-table') .constant(&ap ...

Tips for setting a uniform width for all bars in apexcharts bar column width

When working with dynamic data, the length of the data should also be variable. For instance, if the data has a length of 24, the column width should be 35px; similarly, even if the data has a length of 2, the column width should still be 35px. Apexchart ...

issue with vue v-on:click, interactions are not functioning

I recently started working with vuejs and I'm attempting to create a javascript shopping cart. However, I have encountered an issue with my method. The output is supposed to be an HTML table with some v-on:click actions that aren't functioning as ...

TypeScript does not raise errors for ANY variables that are initialized later

In my code, there is a function that accepts only numeric variables. function add(n1: number) { return n1 + n1; } However, I mistakenly initialized a variable with type "any" and assigned it a string value of '5'. let number1; number1 = &apo ...

Utilizing Vue Cli's Webpack Proxy feature

While working on a project using the vue-cli and the Webpack template, I am facing some difficulties with setting up a custom host. Currently, Webpack is listening to localhost:8080, but I need it to work with a custom domain like . Has anyone found a solu ...

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

I currently have the following NGINX configuration set up: events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root C:/test; index index.html; ...

establishing a minimum number of characters in a regular expression enclosed in parentheses

/^[a-z]+[0-9]*$/igm Tom //valid tom12123 //valid 12tom //invalid to12m //invalid T23 //valid T //valid but I want a minimum of two characters. /^([a-z]+[0-9]*){2,}$/igm Tom //valid tom12123 //valid 12tom //invalid to12m //should be inval ...

Troubleshooting Issue: Difficulty with color--text not displaying in Vue 3/Vuetify 3 Integration

Today, I attempted to set up Vuetify with Vue3 for the first time. Most things seem to be working fine: components are being imported correctly, and classes like "text-center" are functioning as expected. However, I have noticed that props such as "dark" ...

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

Strange behavior in Angular 4 routing: Child module not rendering unless the page is manually refreshed

I've been trying to find a solution for this strange behavior but haven't had any success. There are no errors showing in either the Angular 4 console or the JavaScript console. Currently using Angular CLI (Angular 4). I'm encountering ...

Unable to locate the index.js entry file in React Native

I have a simple React Native application. I am attempting to test it on a virtual Android device by navigating to the project and running npm start -- --reset-cache. After terminating the process, I enter the command react-native run-android. Despite havin ...

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

What's the best way to include CSS and Javascript in an HTML document?

I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...

Mastering the use of v-if and v-else in Vue JS for <td> table elements

After exhausting my search efforts without finding a solution, I am turning to this platform for clarification on how to correctly implement the v-if and v-else directives within <td> elements in an HTML table in Vue. //assuming that the value of th ...

When utilizing Ionic with Angular, it is difficult to access the hardware back button on mobile devices that have buttons located within the display/screen

When trying to access the hardware back button in my app, I encountered an issue where I couldn't produce an alert message to the user before the app closed. After posting a question on Stack Overflow (link of the question) and receiving help from the ...