$emit event from children to parent item that is inside a v-for in VueJS

vue emit to grandparent
vue event pass data
vue emit multiple parameters
vue pass data to component
vue typescript emit event
vuejs get data from child component
vue pass parameter to emit
vue emit not working

let's say I got the following structure:

// parent template
<div v-for="item in items">
   <span>Parent</span>
   <children1>
      // inside children1, i got another children
      <children2 @on:finished="onFinished"></children2>
      <button>Click me</button>
   </children1>
</div>

Then in the children1 methods i would have something like this to listen children2:

methods: {
    onFinished: function () {
       // Here i would like to disable `click me` button and change its text for this particular item inside the iteration
    }
}

From children2 I just execute this when something finishes in there.

this.$emit('on:finished', true)

As I write in the inside of the method, I would like to be able to change with VueJS only one of the items by the $emit from its children. But I was thinking using a data property, but that would affect the entire template, what about using computed maybe? will that work? but how?

Any suggestions?

It seems you're missing the data prop to track the disabled state of each child component. See if this example is what you're looking for, clicking the finish button for each child will disable the other button:

Vue.component('child-component', {
  props: ['disabled', 'text'],
  template: `<div><button :disabled="disabled">{{ text }}</button><button @click="$emit('finished')">Finish</button></div>`
})

new Vue({
  el: '#app',
  data () {
    return {
      children: []
    }
  },
  mounted () {
    this.children = Array.from(Array(10), (x,i) => {
      return {
        id: i,
        disabled: false,
        text: 'Click Me'
      }
    })
  },
  methods: {
    onFinished (e, i) {
      this.children[i].disabled = !this.children[i].disabled
      this.children[i].text = this.children[i].disabled ? 'Disabled' : 'Click Me'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>Parent</span>
  <child-component :disabled="child.disabled" :text="child.text" v-for="(child, i) in children" @finished="onFinished($event, i)" :key="child.id"></child-component>
</div>

How to Emit Data in Vue: Beyond the Vue.js Documentation, Learn how to emit events from child components and nested child the button inside of Shop-Item.vue , it needs to emit data back to its parent in order for Item component --> <shop-item v-for="item in this.items" :item="item"  Although they look similar to this.$emit, they're different in the sense that the this.$parent.$emit emits the event inside of the parent component, while this.$root.$emit emits the event inside of the root component (which in our example would have been App.vue).

First of all, you need to properly listen to the child's emit by

  <div v-for="(item,index) in items">
   <span>Parent</span>
   <children :myIndex='index' @finished="onFinished"></children>
   <button>Click me</button>
  </div>

Notice I have also added an index to your child, which has to be accepted as a prop in your child component

props:[myIndex]

Where onFinished() is a method inside your parent component.

In your child component, emit like this

this.$emit('finished', {state: true, index: myIndex})

Now, you can use this index inside your method-

onFinished(itemState){
this.items[itemState.index].state = itemState.state
}

Modifying component data with event emitters in Vue.js, You will be taken through the process of emitting events from a child child components: test.vue and test2.vue , with the parent component being the app.​vue file. <template> <div> <h1>Vue Top 20 Artists</h1> <ul> <li v-for="(artist, saddlebrown; display: flex; justify-content: center; align-items: center;  IT the slot child emits the event on mount than the slot container should register for it in earlier phases (not mount) because the child is mounted before the parent container and so in such a case, the event will be fired but missed by the parent.

You can use index of item for changing his state.

    data: function () {
     items: [
       {
          enabled: true  
       },
       {
          enabled: true
        }
    ]

For disabling function:

disableItem (index) {
  this.items[index].enabled = false
}

And in template:

<div v-for="(item, index) in items">
<span>Parent</span>
<children @on:finished="disable(index)"></children>
<button>Click me</button>
</div>

Components Basics, We can use this component as a custom element inside a root Vue instance created Above, you'll see that we can use v-bind to dynamically pass props. The parent can choose to listen to any event on the child component instance with Then the child component can emit an event on itself by calling the built-in $emit  Objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state. Thanks! 969

Handling Edge Cases, Element & Component Access Thus allowing the parent component to focus the input inside <base-input> with: this.$refs.usernameInput.focus(). When ref is used together with v-for , the ref you get will be an array containing the child to with v-on , but Vue instances also offer other methods in its events interface. We can  In some cases, we may need “two-way binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child. That’s why instead, we recommend emitting events in the pattern of update:myPropName.

Passing arguments to a custom event that also accepts an object , parent component <div v-for="thing in things" <my-component I'd like to emit an event inside a component, passing an argument (which I know how to do), to a  Child To Parent Communication via Callback Function. There is another way to send a message back to the parent from the child if you don’t want to emit a custom event. What you could do is instead of defining the ok() method on the child, you can define it on the parent.

Is it possible to emit event from component inside slot · Issue #4332 , Vue.js version 2.1.3 Reproduction Link https://jsfiddle.net/x8a3vvk2/8/ Events emitted parent.$emit() from the child, and listen to that event in the parent with this. table="traits" v-slot="i"> <traits-table :items="i.items" :loading="i.loading"  Listening to Child Components Events As we develop our <blog-post> component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:

Comments
  • I can't understand what exactly you want to do here.. Can you add some more description..
  • communicate from children to parent which is an item inside a v-for... i want to only modify the state of that item and not all of them.
  • So, let's on clicking component x which is inside a parent holder, you want to emit a event to the parent holder which updates x.
  • @bhaskar yes exactly
  • Nice workaround, although i just noticed my structure is different than this, i will update my post.
  • I've updated the answer to change the button text as well as use a listener function.
  • Nice, i will take a look and try to do it with my case scenario. Thanks!