[Vuejs]-VueJS child component button changes class of parent

by

0👍

✅

From the snippet you provided it seems like the App.vue has isActive props instead of data for the method enableDarkMode to manage. Vue’s props is not to be updated by the component they belong to because of how the data flow works in Vue props. With the App.vue being the parent of Top Nav component, you probably want it to be like this:

App.vue

<template>
  <div id="app" :class="[isActive ? 'darkmode' : '']>
    <header>
      <top-nav @change-mode="enableDarkMode"></top-nav>
    </header>
    ...
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
    TopNav,
  },
  // this is probably not needed because App.vue is the parent component
  // props: ['isActive'],
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    enableDarkMode(isActive) {
      // manages the data
      this.isActive = isActive;
    },
  },
};
</script>

Top Nav component

<template>
  ...
  <div>
    <button
      :class="[isActive ? 'dark' : 'light']"
      @click="toggle">
        {{ isActive ? "DarkMode" : "LightMode" }}
    </button>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {
      isActive: false,
    };
  },
  components: {},
  methods: {
    toggle() {
      this.isActive = !this.isActive;
      this.$emit('change-mode', this.isActive )
      console.log('emit child')
    },
  },
};
</script>

Leave a comment