Can't pass data from children to parent component with emit

Question

I need to pass data from children to parent component. Code is very simple, but I can't understand what and where I am missing.

export default {
  name: 'TableOfContent',
  props: ['itemGUID'], // is it nessosary? 
  methods: {
      itemClick(itemGUID)
      {
        console.log(itemGUID);
        this.$emit('newchapter', itemGUID) // passing GUID to parent
      }
  }
}

Parent template:

<template>
    <div class="Book" v-on:newchapter="foo(itemGUID)">
        {{msg}}
    </div>
</template>


<script>
import toc from './TableOfContent.vue'

export default {
  name: 'mybook',
  data () {
    return {
      msg: 'my main book'
    }
  },
  methods:
  {
      foo(itemGUID)
      {
          console.log("GUID is: ", itemGUID);
      }
  },

   components: {toc}

}
</script>

This code do not work :(

Where are you using `TableOfContent ` in the template, can you create a fiddle? [Here](https://jsfiddle.net/tiagomatosweb/vqtnpyzw/) is one example of sending argument in emit event. — Saurabh, Mar 08 '17 at 11:38
@Saurabh it's look like `foo()` is no calling. I do not getting nothing to console. I will try to do it. — Dmitry Bubnenkov, Mar 08 '17 at 11:44
It should be `this.$emit('newchapter', this.itemGUID)` into the tableofcontent component. — Belmin Bedak, Mar 08 '17 at 11:45
@Belmin with `.this` I am getting undefined in `itemClick` method. — Dmitry Bubnenkov, Mar 08 '17 at 11:55
Does the itemGUID prop contains any value ? maybe it's by default undefined — Belmin Bedak, Mar 08 '17 at 11:56

score 1 · Answer 1 · answered Mar 08 '17 at 11:54

1

Just do following in template:

<template>
    <div class="Book" v-on:newchapter="foo">
        {{msg}}
    </div>
</template>

answered Mar 08 '17 at 11:54

Saurabh

71,488
40
181
244

same effect :( sorry that I did not jsfiddle, it's a litle bit hard for me. The console.log of children component works fine. I see values on console. But in parent component `foo` seems not triggered, because I do not see on console (data not passing?) – Dmitry Bubnenkov Mar 08 '17 at 12:03
@user1432751 Where are you using TableOfContent in the template, – Saurabh Mar 08 '17 at 12:21
Nowhere. Should I use it? If I do: ```
{{msg}}
``` I am getting full copy of Table Of Content. But I need only pass ID from TOC component – Dmitry Bubnenkov Mar 08 '17 at 12:38
@user1432751 Than only you will be able to use the component, right? – Saurabh Mar 08 '17 at 12:46
What do you mean? I need just pass the ID to other component. My app would swith content when user will click on TOC element. – Dmitry Bubnenkov Mar 08 '17 at 12:49
@user1432751 How are you passing Id? – Saurabh Mar 08 '17 at 12:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137556/discussion-between-user1432751-and-saurabh). – Dmitry Bubnenkov Mar 08 '17 at 12:55

Can't pass data from children to parent component with emit

1 Answers1

Linked