vue.jsvuejs2mixinsvue-mixin

How to use vue mixin in this situation?


I have the following code in two vue component:

  data() {
    return {
      overlay: false
    };
  },
  created() {
    EventBus.$on("toggleSidebar", status => (this.overlay = status));
  }

How can I use this in mixin?

this is my mixin (toggle.js)

import EventBus from "@/eventBus";

const toggle = () => {
  return {
    data() {
      return {
        show: false
      };
    },
    created() {
      EventBus.$on("toggleSidebar", status => (this.show = status));
    }
  };
};

export default toggle;

But I can't use it


Solution

  • import EventBus from "@/eventBus";
    
    const toggle = {
      data() {
        return {
          show: false
        };
      },
      created() {
        EventBus.$on("toggleSidebar", status => (this.show = status));
      }
    };
    
    export default toggle;