Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

84
Visualizações
$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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda