Thanks for reading my question.

I have read about it:

https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

The concept is the same, I need to pass a data object from child to parent. I have used `$emit` to pass data to parent component but it doesn&#39;t works. Do you know what is wrong? You can check my code here: 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    Vue.component(&#39;list-products&#39;, {
      delimiters: [&#39;[[&#39;, &#39;]]&#39;],
      template: &#39;#list-products-template&#39;,
      props: [&#39;products&#39;],
      data: function () {
        return {
          productSelected: {}
        }
      },
      methods: {
        showDetailModal: function (product) {
        	console.log(&#39;click product in child, how can i pass this product to productSelected data in parent?&#39;);
          console.log(product);
          this.productSelected = product;
          this.$emit(&#39;clickedShowDetailModal&#39;, product);
        }
      }
    });


    var app = new Vue({
      delimiters: [&#39;[[&#39;, &#39;]]&#39;],
      el: &#39;#resultComponent&#39;,
      data: {
        listProducts: [
          	{&#39;name&#39;:&#39;test1&#39;,id:1},
            {&#39;name&#39;:&#39;test2&#39;,id:2},
            {&#39;name&#39;:&#39;test3&#39;,id:3}
        ],
        productSelected: {}
      },
      methods: {
        clickedShowDetailModal: function (value) {
          console.log(&#39;value&#39;);
          console.log(value);
          this.productSelected = value;
        }
      }
    });

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt;

    &lt;div id=&quot;resultComponent&quot; data-toggler=&quot;.small-up-2&quot; class=&quot;row small-up-1&quot;&gt;
      &lt;list-products :products=&quot;listProducts&quot;&gt;&lt;/list-products&gt;
    &lt;/div&gt;

    &lt;script type=&quot;text/x-template&quot; id=&quot;list-products-template&quot;&gt;
      &lt;div&gt;
        &lt;div class=&quot;column column-block&quot; v-for=&quot;(product, index) in products&quot; :product=&quot;product&quot; :index=&quot;index&quot; :key=&quot;product.id&quot;&gt;
        &lt;li class=&quot;more-benefits&quot;&gt;
            &lt;a @click=&quot;showDetailModal(product)&quot;&gt;Click me [[ product.name ]] and check console.log &#187;&lt;/a&gt;
        &lt;/li&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;

&lt;!-- end snippet --&gt;


Thanks in advance.

All Emit Solutions on Gang of Coders

Total of 1 Emit Solutions

Pass data from child to parent in Vuejs (is it so complicated?)