Creating a custom button component with Vue.js 2.0

Currently, I am in the process of creating a button component. One issue that I have encountered is regarding the use of vm.$emit to trigger a click event. The problem arises when attempting to inject $event and other parameters into the handler, much like with a native HTML element shown below:

<button v-on:click="handler($event, 'other-parameter')" />

Upon using vm.$emit, the handler only receives the argument passed into it, rather than the expected $event along with additional parameters. While one solution involves passing a function as props, my goal is for the component to behave similarly to a native HTML element. Is there a way to achieve this functionality? If so, HOW can it be accomplished?

Answer №1

What is the reason for being unable to do it? https://v2.vuejs.org/v2/api/#Instance-Methods-Events

methods: {
    handler($e, param) {
       $this.$emit('buttonClicked', $e, param);
    }
}

Furthermore, in the event listener section

<component @buttonClicked="handleClick">

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

The message "Temporary headers are displayed" appears in Chrome

After creating an API to remove images from a MongoDB database using GridFS, I encountered an issue when calling the API. The image is successfully removed, but it causes the server to stop with an error that only occurs in Chrome, displaying "Provisional ...

Build an interactive form with Vue.js and PHP for seamless submission

I am having trouble submitting a form that is created inside a v-for loop. I have tried using Ajax and Axios, but they only seem to work when the form is outside of the v-for loop. Can someone provide a solution for this issue? Below is the code snippet: ...

Navigate to a specific assignment labelled as "foo"

My approach to this problem involves using divs with specific titles. <div id="foo"></div> <div id="foo2"></div> <div id="foo3"></div> <div id="foo4"></div> <a class ...

Looking for assistance in implementing specific styling techniques with React

Trying to implement a slider on my React page sourced from a Github repository. The challenge lies in adding the CSS as it is in JS format. Even after incorporating webpack and an npm compiler, the styling seems unrecognized. Any suggestions or solutions ...

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

After calling the getData function, each object is stored in an array and returned. Now I need the processData function to await these results from getData and then further process them. However, when I try to console.log(cleaningData), I don't see an ...

A guide on incorporating a method using ES6 Rest into a JavaScript object

My goal is to enhance my Person constructor by adding a method that allows users to add friends. I wanted to utilize the "rest" feature of ES6 to pass a variable number of friends, but I seem to be stuck. My initial attempt resulted in an error ("Uncaught ...

JSON object fails to iterate with ng-repeat

It must be the scorching temperature... Having a json object that I'm eager to loop through using ng-repeat, it should be straightforward, but alas! it's just not cooperating. Here's the HTML snippet: <a data-ng-repeat="x in template.m ...

The jQuery execCommand feature fails to generate a pop-up when used within the contenteditable attribute of an HTML tag

Trying to implement an inline text editor using the jQuery execCommand function. Below is a snippet of my source code: /*******************************************************************/ /********** Click: inner of contenteditable text-editor div *** ...

I'm having trouble showing the concealed list with JavaScript

I am new to javascript and facing a challenge. Whenever I update the list items in an HTML example from engineer, pilot, technician, if I select engineer, there should be an onchange event calling a function in JavaScript that shows a hidden select list co ...

Strange behavior detected in TypeScript generic function when using a class as the generic parameter

class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...

Finding the count of childNodes within a div using Selenium

I've been grappling with this issue for the majority of today; I'm trying to tally up the number of childNodes within a parent div. It's essentially mimicking a list where each childNode represents a row that I want to count. The HTML struct ...

Refresh the page twice using ajax/jQuery and setTimeout function

When it comes to Ajax, Java script or CSS, I must confess that I struggle a bit. So please bear with me as I ask for some assistance. I am currently working on a CMS wrapped in Jquery mobile and unable to use meta refresh methods. How can I adjust the code ...

Migration unsuccessful due to incompatible peer dependencies detected - Updating Angular to Version 12 was not successful

Currently in the process of upgrading my Angular v11 apps to Angular v12. Encountering an error while attempting to upgrade Angular packages: ng update @angular/core@12 @angular/cli@12 Error: Migration failed due to incompatible peer dependencies The pa ...

Changing the custom route in React Router to utilize a render prop instead of the component prop

I'm currently working on a React app that incorporates React Router. I've been encountering a bug in my code stemming from my custom ProtectedRoute component: const ProtectedRoute = ({ component, ...args }) => ( <Route component={with ...

What would be the most effective method to send an array through ajax?

My Java script array looks like this: let myArray = new Array(); myArray[0] = 'foo'; myArray[1] = 'bar'; I'm looking for the most efficient way to send this data to the server using AJAX (jQuery). Do I need to serialize it before ...

The 401 error code does not provide a JSON response

Here is an example of using Phalcon to create an API: $response = new Response(); $response->setStatusCode( 401, 'Unauthorized' ); $response->setContentType( 'application/json', 'UTF-8' ); $response->setJsonContent( ...

Anguar server encountered a startup issue and failed to initialize

My server.js file looks like this: var express = require('express'), api = require('./api'), app = express(); app .use(express.static('./public')) .use('./api', api) .get('*', ...

Issue with Webpack failing to bundle a custom JavaScript file

Here is the structure of my directory: Root -dist -node_modules -src --assets --css --js --scss --index.js --template.html --vendor.js package-lock.json package.json postcss.config.js tailwind.config.js common.config.js development.config.js production.co ...

The significance of using `jshint globalstrict: true` alongside 'use strict'

It's quite common for me to come across these two lines at the beginning of JavaScript source code. /* jshint globalstrict: true */ 'use strict'; While I understand the significance of 'use strict';, I am curious about why jshint ...

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...