CODEWITHSUNDEEP
vue.js
jimmygoldshine
jimmygoldshine

Reputation: 151

Vue.js - $emit child event handler not being picked up by Parent's listener

Very new to Vue.js and I'm having issues passing a child's event handler to its direct parent. I have a slider that I want to pass up its value to its parent component. When I run my code I and getting 'child' printed to the console but not 'parent' so it's clearly not listening correctly.

new Vue({
  el: '#price-filter-container',
  data() {
    return {
      value: [0, Products.maxPrice],
      min: 0,
      max: Products.maxPrice,
      products: [Products.products]
    }
  },
  methods: {
    sliderChange: function(data) {
      console.log("parent")
    }
  }
});

Vue.component('price-filter', {
      props: ['value', 'min', 'max', 'products'],
      template: '<vue-slider v-on:click.native="childSliderChange" v-model="value" :min="min" :max="max"></vue-slider>',
      methods: {
        childSliderChange: function() {
          console.log("child");
          this.$emit('childSliderChange');
        }
      },
    });
<div id="app" style="margin-top:20px;width:1000px">
  <div id="price-filter-container" style="width:300px;margin:50px auto;">
    <price-filter v-on:childSliderChange="sliderChange" :products="products" :max="max" :min="min" :value="value"></price-filter>
  </div>

</div>

I'm completely stumped. Why doesn't this work? Why doesn't 'parent' get printed to the console?

Upvotes: 4

Views: 2404

Answers (1)

Bert
Bert

Reputation: 82449

I recommend avoiding using camel cased events altogether. Emit a kebab cased event and add a kebab case handler.

this.$emit('child-slider-change')

and 

<price-filter v-on:child-slider-change="sliderChange" :products="products" :max="max" :min="min" :value="value"></price-filter>

Here's a basic example.

console.clear()

Vue.component("emitter",{
  template:`<h1>I'm the emitter</h1>`,
  mounted(){
    setTimeout(() => this.$emit('child-slider-change'), 500)
  }
})


new Vue({
  el:"#app",
  data:{
    caught: null
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <emitter @child-slider-change="caught = 'Caught the event'"></emitter>
  {{caught}}
</div>

Upvotes: 4

Related Questions