Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

82
Views
$emit not being caught by listener

I'm having an issue here that I can't seem to fix: I would like to have a simple toggle for a component using $emit

this is my index.vue :

    <div
      v-for="(filteredArticles, categoryKey) in groupedCategories"
      :key="categoryKey"
      class="l"
      @listen-button-event="toggle"
    >
      <CategoryWrapper :title="categoryKey" />
    </div>
  methods: {
    toggle () {
      alert('I did something')
      console.log('ping')
      this.isActive = !this.isActive
    }
  }

this is my component :

    <div
      :class="{ active: isActive }"
      @click="changeComponent()"
    >
      <a>{{ title }}</a>
    </div>
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    changeComponent () {
      this.$emit('listenButtonEvent')
    }
  }

Doesn't seem to do anything...

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

listen-button-event shouldn't be on the div it should be on the CategoryWrapper Component.

<div
  v-for="(filteredArticles, categoryKey) in groupedCategories"
  :key="categoryKey"
  class="l"
  
>
  <CategoryWrapper :title="categoryKey" @listen-button-event="toggle" />
</div>
about 4 years ago · Juan Pablo Isaza Report

0

Listeners need to be camelCas'ed like this

<CategoryWrapper :title="categoryKey" @listenButtonEvent="toggle" />

and not kebab-case'ed.

As you can see in the Vue devtools, since you're emitting listenButtonEvent here.

enter image description here


A better convention being emitting a update:listenButtonEvent btw, cannot find an official recommendation for that one again.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!