0

Is there any way to reload the sidebar component from other vue component ? I got a menuLabel at the sidebar which will show the number of order in pending status. So I want to update the sidebar menuLabel whenever I change the status from pending to others.

For example, When I click submit or some button in SalesOrder.vue, I want to reload the sidebar.

Sample component code:

export const Routes = [
{
        path: '/admin',
        components: { default: ThemeContent, header: ThemeHeader, sidebar: ThemeSidebar, footer: ThemeFooter },
        children: [
            { path: 'dashboard', component: DashboardAdmin },   
            { path: 'salesorder', component: SalesOrder},   
],
meta: { requiresAdmin: true }
},
Max
  • 9
  • 7
  • The sample component code is in the route.js – Max Aug 09 '18 at 09:37
  • By reload the sidebar, do you mean you want to make an ajax request to get the latest orders data? – Brian Lee Aug 09 '18 at 09:51
  • Hi Digital Drifter, for example, there is one pending order and this will show one in the sidebar menuLabel. When I change the order from pending to delivered and submit, i want to the sidebar menuLabel to update from one to zero because the menuLabel is showing the number of pending order. – Max Aug 09 '18 at 10:00
  • My sample code is in here https://forum.vuejs.org/t/how-to-reload-sidebar-component/40540 – Max Aug 10 '18 at 08:02

2 Answers2

0

You can separate 1st sidebar to external component and 2nd to another. Then include both components to your sidebar block and hide/show them whenever you want.

<sidebar>
  <first-sidebar :trigger="boolean"></first-sidebar>
  <second-sidebar :trigger="boolean"></second-sidebar>
</sidebar>

Then in your first sidebar component

<template>
  <div v-if="trigger">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: ['trigger']
}
</script>

And finally second sidebar component

<template>
  <div v-if="!trigger">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: ['trigger']
}
</script>
Sergey Shuryakov
  • 189
  • 5
  • Thanks I understand but do you have any sample I can refer to ? – Max Aug 09 '18 at 10:15
  • My sample code is in here https://forum.vuejs.org/t/how-to-reload-sidebar-component/40540 – Max Aug 10 '18 at 08:02
  • you already have sidebar component. Now you need component with second sidebar. I can't figure out where your second sidebar is. https://stackoverflow.com/questions/44700257/hide-a-component-in-vue-js check this to see how to hide/show components – Sergey Shuryakov Aug 10 '18 at 08:40
  • Hmm...ok. So after I create a second sidebar then what should I do? – Max Aug 10 '18 at 08:49
0

Thanks everyone for helping me, I have found a way for me to interact from one component to another which is using a bus event vuejs. https://alligator.io/vuejs/global-event-bus/

Max
  • 9
  • 7