Estoy trabajando en un proyecto de Nuxt JS. Tengo varios componentes, y uno de mis componentes llamado ComplianceOptoutRawText incluye un componente secundario llamado ComplianceOptoutViaExternalService , y es este componente secundario donde estoy usando un v-on para escuchar un evento $emit de ComplianceOptoutRawText para poder alternar una variable, pero no lo veo en absoluto en los registros de mi consola y necesito saber qué estoy haciendo mal y necesito cambiar.

Aquí está mi marcado con todo lo que es apropiado:

CumplimientoOptoutRawText

 <template> <div> <div> <div class="tw-hidden md:tw-block tw-font-bold tw-mb-4"> <ComplianceOptoutViaExternalService> <template #trigger> <button @click="$emit('shown-optout-intent', true)" type="button">here</button> </template> </ComplianceOptoutViaExternalService> </div> </div> </div> </template>

Y luego el propio componente hijo:

CumplimientoOptoutViaExternalService

 <template> <div> <slot name="trigger"></slot> <article v-show="wantsToOptOut" v-on:shown-optout-intent="hasShownOptoutIntent" class="tw-bg-white tw-p-4 md:tw-p-6 tw-rounded-xl tw-text-gray-800 tw-border tw-border-gray-300 tw-text-left tw-mt-4"> <validation-observer v-if="!didOptOut" ref="optoutServiceForm" key="optoutServiceForm" v-slot="{ handleSubmit }" tag="section"> <form> ... </form> </validation-observer> </article> </div> </template> <script> export default { data () { return { wantsToOptOut: false, isOptingOut: false, didOptOut: false } }, methods: { /* ** User has shown opt out intent */ hasShownOptoutIntent (value) { this.wantsToOptOut = !this.wantsToOptOut } } } </script>

Tenga en cuenta que mi componente secundario usa una ranura, esto es para que pueda colocar todo según sea necesario en el componente principal, pero en esencia, tengo un componente principal que emite un valor y luego lo escucha a través v-on:shown-optout-intent="hasShownOptoutIntent" que ejecuta el método hasShownOptoutIntent .

Pero nunca veo nada desde el botón, incluso si consola.log esto. ¿Qué me estoy perdiendo?