Vue, handling events in a bizarre manner with multiple instances of the same component

Trying to utilize two instances of the same component, I have implemented two methods that should be triggered when one of the instances emits an event. The distinction between the two instances is that instance1 is supposed to call method1, while instance2 should call method2.

However, I am facing an issue where method1 is always being called, regardless of which component triggers the event. Am I overlooking something?

Below is a brief example of my setup:

CustomComponent

<template>
....// Some code that calls myMethod at a certain point
</template>
<script>
export default {
  methods: {
    myMethod () {
      this.$emit('picture-taken')
    }
  }
}
</script>

Page where CustomComponent is used

<template>
  <custom-component @picture-taken="func1" />
  <custom-component @picture-taken="func2" />
</template>

<script>
export default {
  methods: {
    func1() {
      debugger
      // This function always ends up getting executed
    },
    func2() {
      debugger
    },
  }
}
</script>

Answer №1

This specific code snippet is perfect for your particular scenario.

parent page

<template>
  <div>
    <child :id="1" @picture-taken="callSpecificFunction"></child>
    <child :id="2" @picture-taken="callSpecificFunction"></child>
  </div>
</template>

<script>
export default {
  auth: false,
  methods: {
    callSpecificFunction(id) {
      console.log('id emitted', id)
      this[`function${id}`]()
    },
    function1() {
      console.log('function1 called')
    },
    function2() {
      console.log('function2 called')
    },
  },
}
</script>

Child.vue

<template>
  <button @click="emitPlease">please do emit for id {{ id }}</button>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    emitPlease() {
      this.$emit('picture-taken', this.id)
    },
  },
}
</script>

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

Is there a way to verify whether the value of a parameter sent to a javascript function is null?

On my hands, lies this piece of javascript code: function modifyButtonState(selectionItem, actionType, pictureCategory) { var $selection = $(selectionItem); var $buttonIcon = $(selectionItem + ' icon'); $buttonIcon.re ...

When utilizing jQuery UI dialog and AJAX, the click function fails to execute after the first instance

I'm encountering an unusual issue with jQuery UI dialog and AJAX requests. Here is the sequence of events: Click on a link to open a div using AJAX. In the AJAX-loaded div, click on another link to open a jQuery UI dialog that loads another AJAX re ...

Tips for uploading a webform with a file via Jquery/Ajax to a webmethod

Is it feasible? I have a webform with textboxes and a file upload section. I am attempting to send the data to a web method using the .ajax() method. It appears that sending file content to the web method in this way may not be achievable as I am unable to ...

Getting information for a Pie Chart in React JS using State: A Step-by-Step Guide

Having just started using React, I've encountered some difficulties in dynamically passing data from my state to Chart.js. Ideally, I want the Pie chart to update automatically whenever a user updates the Textbox and requests the Output. I have stored ...

Discovering the art of importing JavaScript files dynamically within controllers

I have one main form through which I pass data from 10 different components, each including the ID of a table that I need to retrieve data from in the database. The issue I am facing is that the code responsible for fetching this data asynchronously is spr ...

When the awaiting fetch operation completes, it yields two separate arrays of data that are inaccessible for immediate use

I've encountered a problem while working on my full-stack project that uses Express in the back-end and React in the front-end. The issue lies with a specific component designed to fetch results from a database query located at /api/blogposts. Below ...

What is the best technique for creating a preloader that can seamlessly fill the background of a vector image?

I am looking for guidance on creating a CSS3 preloader using a vector image. My goal is to have the logo start off transparent with only the border visible, and as the loading occurs, fill in from bottom to top with the background color. Thank you to ever ...

Interpret an item based on its specific axis in that location

Being new to three.js, I am facing a challenge with translating an object imported from Maya. The issue arises after rotating the object; when I attempt to move it afterward, it moves along the scene's axis instead of in the direction of the rotation. ...

Transferring parent elements' attributes to child components using AngularJS 1.3

I am encountering an issue with Angular JS related to two directives that I have implemented. angular.module('myModule', []) .directive('myFirstDirective', function(){ return { link: function (scope, elem, attr) ...

An issue with npm arises on Windows 10 insider preview build 14366

It appears that npm and nodejs are experiencing issues on the latest Windows version build 1433 When I ran the following command: npm -v events.js:141 throw er; // Unhandled 'error' event ^ Error: This socket is closed. ...

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows: var data = { a: [1, 2, 3, 4, 5], b: [ [1, 2], [3, 4], [5, 6] ] }; Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented: <i ...

Refreshing Facebook comments does not occur when using FB.XFBML.parse()

My JavaScript photo gallery dynamically loads images from an API onto the page when users click on a thumbnail. I want users to be able to leave Facebook comments on each image, so I've included a Facebook comments element on the page containing the g ...

Validating ReactJS properties

Transitioning from ReactJs to React-Native, I came across this function structure in a react-native button code by Facebook: class Button extends React.Component<{ title: string, onPress: () => any, color?: ?string, hasTVPreferredFocus?: ?bo ...

What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...

Combining various data entries within a unified form

I have a requirement to create a user-friendly page for entering multiple sets of personal information. Users should be able to fill out details for each record separately and then submit all the records at once. My goal is to design the page in such a wa ...

Retrieving information from Laravel route using React

In my Laravel application utilizing Laravel Framework 8.83.16, I have implemented the following function: public function checkIdentifier($physicalItem_identifier) { try { $con = "mysql"; $res = DB::connec ...

The Organization of Tabs in the AngularJS ui-select Component

As a newcomer to angularjs, I am currently working on a web application using the ui-select library for select2-style dropdowns. While developing my forms with appropriate tabindex values, I noticed a user experience issue with tab ordering. When tabbing ...

The JavaScript array on its second usage had a length of '0', yet it still contained objects within it

About the Task: This task involves working with two arrays: arrNumber, which is a number array, and arrString, which is a string array. The goal is to create a list of objects using the values from arrNumber, where the object keys are numbers or characte ...

"Encountered a Parsing Error: function keyword was an unexpected token in an Async Function using a more recent version of Node

In the process of working on a side project, I am utilizing node and firebase technologies. While I have successfully created regular functions and cloud functions, I encountered an issue when attempting to create an async function like so: async function ...

Click on the header to activate the accordion link with a trigger

I am having an issue with a trigger. My goal is to make the accordions collapse not only by clicking on the link, but also by clicking on the entire header panel. Below is my header's code: <div class="accordion-head" role="tab"> <div cl ...