CODEWITHSUNDEEP
vuejs2clickvue-componentnuxt.jsvue-props
Dan W
Dan W

Reputation: 138

Passing an event to a parent component with Nuxt.js

I have a simple header component which contains a clickable hamburger, I want to separate the hamburger into a separate component, but the click event no longer works when I do so, I think I need some kind of boolean prop but can't find an explanation or I'm looking for the wrong thing.

This works as a single component

/components/Header.vue

<template>
  <div class="--row header__wrapper" :class="{active: menuClose}">
    <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuClose: false,
    };
  }
};
</script>

The below doesn't work as loses click event when separated into two components which is where I am stuck.

/components/Header.vue

<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
        <Hamburger/>
</div>
</template>

<script>
import Hamburger from "~/components/Hamburger.vue";
  export default {
    components: {
      Hamburger
    }
  }
};
</script>

/components/Hamburger.vue

<template>
  <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
    <span></span>
    <span></span>
    <span></span>
  </button>
</template>

<script>
export default {
  data() {
    return {
      menuClose: false
    };
  }
};
</script>

Upvotes: 1

Views: 10489

Answers (1)

rohitpal
rohitpal

Reputation: 455

Send event from Child to parent component and make the menuClose via prop in child. It is very easy to implement, follow

https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Nuxt has nothing to do with events.

EDIT I have created an example for you

https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14

Upvotes: 7

Related Questions