dynamic class with vuejs-CodePudding

I'm creating a dashboard with Laravel and VueJS, I created a button that allows to enlarge or reduce my sidebar in a Sidebar.vue component here is my components:

<template>
  <aside :>
    <div >
      <div >
        <i ></i>
      </div>
      <span >CONTROLPANEL</span>
    </div>

    <div >
      <button  @click="ToggleMenu()">
        <span ><i ></i></span>
      </button>
    </div>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      is_expanded: ref(localStorage.getItem('is_expanded') === 'true'),
    }
  },

  methods: {
    ToggleMenu() {
      this.is_expanded = !this.is_expanded
      localStorage.setItem('is_expanded', this.is_expanded)
    },
  },
}
</script>

The problem that arises is that in another component I created a navbar with a fixed width, what I would like to do is that when my sidebar changes size I would like my navbar to also change, in the other component I just have a template with a nav and the import of my sidebar.

CodePudding user response：

This code works fine

<template>
  <aside :>
    <div >
      <div >
        <i ></i>
      </div>
      <span >CONTROLPANEL</span>
    </div>

    <div >
      <button  @click="ToggleMenu()">
        <span >
          <i ></i>click me
        </span>
      </button>
    </div>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      is_expanded: localStorage.getItem("is_expanded") === "true",
    };
  },

  methods: {
    ToggleMenu() {
      this.is_expanded = !this.is_expanded;
      localStorage.setItem("is_expanded", this.is_expanded);
    },
  },
};
</script>

Here is a GIF showing the result in action: https://share.cleanshot.com/TtKsUj

CodePudding user response：

Make local storage reactive by using watcher and setting its deep property to true https://vuejs.org/guide/essentials/watchers.html#deep-watchers or if you are using vue2 then use event bus