CODEWITHSUNDEEP
vue.jscomponents
Ian Davis
Ian Davis

Reputation: 19413

Vue2 component $emit not calling parent function

I have a button inside of a component that is calling an $emit('close') and the container that is holding the component has a @close='myMethod' and myMethod does not get called when you click the button that's inside the component.

Html:

<button @click="myMethod">outer</button>
<div class="parent" @close="myMethod">
  <my-component></my-component>
</div>
<div id="my-component" style="display:none;">
  <button @click="$emit('close')">emit</button>
</div>

JS:

Vue.component('my-component', {
    template: '#my-component'
});

var app = new Vue({
    el: '#app',
    methods: {
      myMethod: function() {
        console.log('myMethod invoked');
      }
    }
});

If you click the outer button, the method gets invoked, but not the button inside the template. What am I missing?

Jsbin: http://jsbin.com/cuhipekocu/edit?html,js,console,output

Upvotes: 3

Views: 1072

Answers (1)

Bert
Bert

Reputation: 82449

You're not listening to the event on the component. Try

<div class="parent">
  <my-component @close="myMethod"></my-component>
</div>

Upvotes: 6

Related Questions