Passing methods from child to parent components in Vue2 looped componentsHere is a

Question

Passing methods from child to parent components in Vue2 looped componentsHere is a

Currently, I am iterating through the root component, which contains a child component within it.

<root-select v-for="offer in offers"  >
   <child-options v-for="item in options" >
   </child-options>
</root-select>

However, when I use $emit to trigger a function in the root component from the child component, all instances of the root component are affected by the data change.

Child Component:

EventBus.$emit('toggle', value);

Root Component:

EventBus.$on('toggle', this.toggle);

I actually need the data changes to only occur within the specific component that triggered the event. Any suggestions would be greatly appreciated.

Thank you.

javascript vue.js vuejs2 vue-component event-bus

Answer 1

Answer №1

It is recommended to avoid using Event bus for emitting events. Instead, use the standard Emit method to emit from child to parent.

Inside the child component function:

this.$emit('toggle', value);

In the parent component function:

<template><child-options v-for="item in options" @toggle="onToggleFn"></child-options></template>

<script>
...
methods:{
     onToggleFn:function(){
         //place your logic here
     }
}
</script>

Answer 2

It is recommended to avoid using Event bus for emitting events. Instead, use the standard Emit method to emit from child to parent.

Inside the child component function:

this.$emit('toggle', value);

In the parent component function:

<template><child-options v-for="item in options" @toggle="onToggleFn"></child-options></template>

<script>
...
methods:{
     onToggleFn:function(){
         //place your logic here
     }
}
</script>

Passing methods from child to parent components in Vue2 looped componentsHere is a

Answer №1

Similar questions

Utilize Javascript to convert centimeters into inches

Creating dynamic styles with Material-UI's useStyles

Are there any additional dependencies required for Orbitdb to function properly?

When hovering over items in the navigation bar, the entire bar expands seamlessly

Basic HTML Audio Player Featuring Several Customizable Variables

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Retrieve the element (node) responsible for initiating the event

The debounce function seems to be malfunctioning as I attempt to refine search results by typing in the input field

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

Exploring the ng-repeat directive with an array of objects

The ideal formats for tables and JavaScript: How to effectively retrieve arrays from a table?

Pressing the button will activate the Ctrl+z and Ctrl+y key commands

Sorting a parent array in AngularJS using a child array's Date field as the basis

Doesn't the .stop(true) function completely clear the queue as it should?

React Star Rating Component: Issue with Image Display

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

Looking for an example of using Vuetify 3.4 and Vue 3.3 radiogroup with rules?

What exactly is the functionality of the third parameter (usually next()) behind the scenes in ExpressJS once it is hidden behind the abstraction layer?

Increase the border at the bottom while hovering with React.js and the Material UI library

Having trouble showcasing the header title of a website with vuejs