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

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

Utilizing the power of JavaScript within HTML to remove elements upon being clicked

Using regular expressions to replace strings in JavaScript

The phenomenon of jQuery AJAX converting the escape character from %20 to + has been observed

What is the best choice for code design patterns in a nodejs environment? What are the key considerations for creating a well-

Div element to animate and vanish in a flash

Error: The mongoose initialization is preventing access to the 'User' variable

Creating a JSON hierarchy from an adjacency list

Error: anticipated expression, received keyword 'if'

Navigating with buttons in React JS

Tips for extracting a specific attribute from an array of objects using both react and JavaScript while considering various conditions

The powerful combination of ES6 and sequelize-cli

Difficulty encountered while connecting JSON data to a list using Angular JS

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Efficient scripting on Visual Studio

Angular not detecting changes in string variables

Text that is curving around a D3.js pie chart

The jquery live click event is not functioning properly on iPad devices

Trouble with component not refreshing upon store modification in Vuex

Calculating the percentage in a jQuery Slider