How to reload sidebar component?

Hi All, I want to ask how can I reload the sidebar component whenever I save the data in Sales Order Form page?

Sales Order Form

<template>
<div>
    <section class="content-header">
        <h1>
            Sales Order Form
        </h1>
        
        
    </section>
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-body">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#customer_details_tab">Customer Details</a></li>
                            <li><a data-toggle="tab" href="#product_tab">Products</a></li>
                            <li><a data-toggle="tab" href="#history_tab">History</a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="customer_details_tab" class="tab-pane fade in active">
                                <div class="table-responsive">
                                    <table class="table no-margin">
                                      <tbody>
                                        <tr>
                                            <td><b>Order ID</b></td>
                                            <td>#{{orders.id}}</td>
                                        </tr>
                                        <tr>
                                            <td style="width:25%;"><b>Invoice:</b></td>
                                            <td>
                                                <input type="file" v-on:change="onFileChange" class="form-control" id="input_invoice" accept="image/*,application/pdf" style='    max-width: 215px;'>
                                                <span v-if="orders.invoice_file!='-'"><a :href="orders.invoice_file" target="_blank" style="cursor:pointer;">Click here to view invoice.</a></span>
                                            </td>
                                        </tr> 
                                        <tr>
                                            <td><b>Name</b></td>
                                            <td><input v-model="orders.name" class="form-control" type="text"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>Email</b></td>
                                            <td><input v-model="orders.email" class="form-control" type="email"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>Mobile No</b></td>
                                            <td><input v-model="orders.mobile" class="form-control" type="text"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>Address</b></td>
                                            <td><input v-model="orders.address" class="form-control" type="text"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>City</b></td>
                                            <td><input v-model="orders.city" class="form-control" type="text"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>Postcode</b></td>
                                            <td><input v-model="orders.postcode" class="form-control" type="text"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>State</b></td>
                                            <td>
                                                <select class="form-control" v-model="orders.state">
                                                    <option v-for="option in state_options" v-bind:value="option.name">{{option.name}}</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Country</b></td>
                                            <td>
                                                <select class="form-control" v-model="orders.country">
                                                    <option v-for="option in country_options" v-bind:value="option.name">{{option.name}}</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Payment Method</b></td>
                                            <td>{{orders.payment_type}}</td>
                                        </tr>
                                        <tr>
                                            <td><b>Payment Bank File</b></td>
                                            <td v-if="orders.payment_bank_file!='-'">
                                                <a :href="orders.payment_bank_file" target="_blank" style="cursor:pointer;">File</a>
                                            </td>
                                            <td v-else>-</td>
                                        </tr>
                                        <tr>
                                            <td><b>Total Amount</b></td>
                                            <td>{{orders.total_amount}}</td>
                                        </tr>
                                        <tr>
                                            <td><b>Order Status</b></td>
                                            <td>
                                                <select class="form-control" v-model="orders.order_status" style="margin-top: 5px;">
                                                    <option v-for="option in order_status_options" v-bind:value="option.id" v-if="option.id!='5' && option.id!='6'">{{option.name}}</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Remark</b></td>
                                            <td><textarea rows="5" v-model="orders.remark" class="form-control summernote"></textarea></td>
                                        </tr>
                                        <tr>
                                            <td><b>Created At</b></td>
                                            <td>{{orders.created_at}}</td>
                                        </tr>
                                        <tr>
                                            <td><b>Updated At:</b></td>
                                            <td>{{orders.updated_at}}</td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <a @click="save" class="btn btn-primary" role="button"> Save </a>
                                                <a @click="back" class="btn btn-danger" role="button"> Back </a>
                                            </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="product_tab" class="tab-pane fade">
                                <myvuetable :apiUrl="apiUrl" :fields='fields' @updatestat="updatestat"></myvuetable>
                            </div>
                            <div id="history_tab" class="tab-pane fade">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Order Status</th>
                                            <th>Remark</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(history, key, index) in order_history">
                                            <td>{{key+1}}</td>
                                            <td>{{history.status}}</td>
                                            <td v-html="history.remark"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="updatestat" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header" style="background-color: rgb(115, 130, 203);color: #fff;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Update</h4>
              </div>
              <div class="modal-body">
                <div class="container-fluid">
                  <div class="row">
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="padding-top: 12px;">Status</label>
                        <div class="col-md-10">
                            <select class="form-control" v-model="update_order_status" style="margin-top: 5px;">
                                <option v-for="option in order_status_options" v-bind:value="option.id">{{option.name}}</option>
                            </select>
                        </div>
                        <label class="col-md-2 control-label" style="padding-top: 12px;">Remarks</label>
                        <div class="col-md-10">
                            <textarea rows="4" v-model="update_remarks" style="margin-top: 5px;" class="form-control update_remarks"></textarea>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" data-dismiss="modal" @click="update" class="btn btn-primary">Update</button>
              </div>
            </div>
          </div>
        </div> 

    </div>
</div>
<script>
export default {
    data() {
        return {
            orders:{
                id:'',
                invoice_file:'',
                name:'',
                email:'',
                mobile:'',
                address:'',
                city:'',
                postcode:'',
                state:'',
                country:'',
                payment_type:'',
                payment_bank_file:'-',
                order_status:'',
                total_amount:'',
                remark:'',
                created_at:'',
                updated_at:''
            },
            order_history:[],
            order_items:[],
            update_remarks:'',
            update_order_status:'',
            invoice:'',
            country_options:'',
            state_options:'',
            order_status_options:'',
            apiUrl: '/ajax/getorderitems/'+this.$route.params.id,
            fields: [             
              {
                name: 'id',
                title: 'ID',
                sortField: 'id',
                direction: 'asc'
              },
              {
                name: 'product_name',
                title: 'Name',
                sortField: 'product_name',
                direction: 'asc'
              },
              {
                name: 'main_image',
                title: 'Image',
              },  
              {
                name: 'quantity',
                title: 'Qty',
                sortField: 'quantity',
              },
              {
                name: 'amount',
                title: 'Amount',
                sortField: 'amount',
              },
              /*{
                name: 'total_amount',
                title: 'Total Amount',
                sortField: 'total_amount',
              },
              {
                name: 'delivery_charges',
                title: 'Delivery Charges',
                sortField: 'delivery_charges',
              },
              */
              {
                name: 'status',
                title: 'Status',
                sortField: 'status',
              },
              {
                name: 'return_reason',
                title: 'Return Reason',
                sortField: 'return_reason',
              },
              {
                name: 'return_quantity',
                title: 'Return Quantity',
                sortField: 'return_quantity',
              },
              {
                name: '__slot:actions',
                title: 'Action',
                titleClass: 'center aligned',
                dataClass: 'center aligned'
              }
            ],
        }
    },
    methods : {
      init () {
        axios.get('/ajax/getorder/'+this.$route.params.id).then(response => {
            this.orders = response.data;
            if(!(response.data.invoice_file)){
                this.orders.invoice_file = '-';
            }
            if(!(response.data.payment_bank_file)){
                this.orders.payment_bank_file = '-';
            }
            if(!(response.data.remark)){
                this.orders.remark = '';
            }
            if(!(response.data.updated_at)){
                this.orders.updated_at = '-';
            }
        });
        axios.get('/ajax/getorderhistory/'+this.$route.params.id).then(response => {
            this.order_history = response.data;
        });
        axios.get('ajax/setting/getcustomdata/country').then(response => {
            if(response.data){
                this.country_options = response.data
            }
        });
        axios.get('ajax/setting/getcustomdata/state').then(response => {
            if(response.data){
                this.state_options = response.data
            }
        });
        axios.get('/ajax/getorderstatus').then(response => {
            this.order_status_options = response.data;
        });
      },
      back(){
        window.location.href = "/admin/sales_order";
        //this.$router.go(-1);
      },
      onFileChange(e) {
          let files = e.target.files || e.dataTransfer.files;
          if (!files.length){
              this.invoice = '';
              return;
          }
          this.createFile(files[0]);
      },
      createFile(file) {
          let reader = new FileReader();
          let vm = this;
          reader.onload = (e) => {
              vm.invoice = e.target.result;
          };
          reader.readAsDataURL(file);
      },
      save(){
          var vm=this;
          axios.post('/ajax/saveorder/'+this.$route.params.id,{
              invoice:vm.invoice,
              orders:vm.orders,
          })
          .then(function(response){ 
              vm.init();
              window.notify(response.data);
          }) 
          .catch(function(response){
              var error_msg = '';
              if( response.data.error){
                for(var x in response.data.error){
                    error_msg += response.data.error[x]+"<br />";
                } 
              }
              window.notify(error_msg, { type: 'danger' }); 
          });
      },
      updatestat(id){
          axios.get('/ajax/getorderitembyid/'+id).then(response => {
              this.order_items = response.data;
              $('#updatestat').modal();
          });
      },
      closemodal(){
        $('#updatestat').modal('hide');
      },
      update(){

      }
    },
    mounted() {
        this.init();
        console.log('Page mounted.')
    }
}

route.js

window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import VueEvents from 'vue-events'
Vue.use(VueEvents)

import Vuetable from 'vuetable-2/src/components/Vuetable'
import VueTablePagination from 'vuetable-2/src/components/VueTablePagination'
import VueTablePaginationDropDown from 'vuetable-2/src/components/VueTablePaginationDropDown'
import VueTablePaginationInfo from 'vuetable-2/src/components/VueTablePaginationInfo'
import VuetablePaginationMixin from 'vuetable-2/src/components/VuetablePaginationMixin'

Vue.use(Vuetable)

Vue.component("vuetable", Vuetable);
Vue.component("vuetable-pagination", VueTablePagination);
Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
Vue.component("vuetable-pagination-mixin", VuetablePaginationMixin);

import Datepicker from 'vuejs-datepicker';
Vue.component("datepicker", Datepicker);

import VueTablePaginationBootstrap from './vendor/larazor/common/VuetablePaginationBootstrap'
import Myvuetable from './vendor/larazor/common/Myvuetable.vue'
Vue.component("vuetable-pagination-bootstrap", VueTablePaginationBootstrap);
Vue.component("myvuetable", Myvuetable);

import FilterBar from './vendor/larazor/common/FilterBar.vue'
Vue.component("filter-bar", FilterBar)

const ThemeHeader = Vue.component('ThemeHeader', require('./vendor/larazor/layouts/Header.vue'));
const ThemeSidebar = Vue.component('ThemeSidebar', require('./vendor/larazor/layouts/Sidebar.vue'));
const ThemeContent = Vue.component('ThemeContent', require('./vendor/larazor/layouts/Content.vue'));
const ThemeBreadcrumb = Vue.component('ThemeBreadcrumb', require('./vendor/larazor/layouts/Breadcrumb.vue'));
const ThemeFooter = Vue.component('ThemeFooter', require('./vendor/larazor/layouts/Footer.vue'));

const SalesOrderForm = Vue.component('SalesOrderForm', require('./components/SalesOrderForm.vue'));

export const Routes = [
{
    path: '/admin',
    components: { default: ThemeContent, header: ThemeHeader, sidebar: ThemeSidebar, footer: ThemeFooter },
    children: [
        { path: 'salesorder/edit/:id', component: SalesOrderForm },
    ],
    meta: { requiresAdmin: true }
}
]

Sidebar.vue

<template>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
				<img :src="user.thumbnail" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                  <p>{{ user.name }}</p>
                  <a href="#"><i class="fa fa-circle text-success"></i> {{ $t('online') }}</a>
                </div>
            </div>

            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">{{ $t('main_navigation') }}</li>
                <li v-for="(item, index) in menulist" :class="currentUrl === item.menuUrl ? 'active treeview':'treeview'">
                    <template v-if="item.menuUrl">
                      <router-link :to="item.menuUrl" @click.native="toggleName=''">
                        <i :class="['fa',item.menuIcon]" aria-hidden="true"></i>
                        <span>{{item.menuName}}</span> 
                        <i class="pull-right-container">
                            <span class="label label-primary pull-right">{{item.menuLabel}}</span>
                        </i>
                      </router-link>
                    </template>
                    <template v-else-if="item.menuSubLink">
                      <a href="javascript:;" @click="isToggle(item.menuName,item.defaultActive)">
                        <i :class="['fa', item.menuIcon]"></i>
                        <span>{{item.menuName}}</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                      </a>
                      <transition name="sliderToggle" mode="out-in">
                        <ul class="treeview-menu" v-show="item.menuName === toggleName || item.defaultActive">
                          <li v-for="(subitem,subindex) in item.menuSubLink" :key="subindex" :class="currentUrl === subitem.menuUrl ? 'active':''">
                            <router-link :to="subitem.menuUrl">
                              <i :class="['fa', subitem.menuIcon]"></i>
                              <span>{{subitem.menuName}}</span>
                              <i class="pull-right-container">
                                  <span class="label label-primary pull-right">{{subitem.menuLabel}}</span>
                              </i>
                            </router-link>
                          </li>
                        </ul>
                      </transition>
                    </template>
                </li> 
            </ul>
        </section>
    </aside>
  </template>

  <script>
    import { Config } from '../../../config.js';
    import mycookie from '../../../vue-cookies.js';

    export default {
        data() {
            return {
                toggleName: '',
                currentUrl: '',
                english: true,
                chinese: false,
                menulist: [],
                user: {
                    name: '',
                    status: 'online',
					          thumbnail: Config.defaultUserImage,
                }
            }
        },
        watch: {
          '$route'() {
            this.currentUrl = this.$route.fullPath;
          }

        },
        methods : {
            init () {
                var $vm = this;
                axios.get('/ajax/user/myaccount').then(response => {
                    if(response.data){
                      $vm.user.name = response.data.name;
                      if(response.data.thumbnail != ''){
                          $vm.user.thumbnail = response.data.thumbnail;
                      }
                    }
                });
                axios.get('/ajax/init').then(response => {
                    if(response.data.user){
                      $vm.menulist = response.data.menu;
                      //$vm.user = response.data.user;
                    }
                });
            },
            isToggle(name, defaultActive) {
              //this.clearDefaultActive(); 
              //defaultActive ? false : name !== this.toggleName ? this.toggleName = name : this.toggleName = '';  
            },
            clearDefaultActive() {
               
            },
            change_language(language){
                axios.get('/ajax/change_language', {
                  params: {
                    language: language
                  }
                  }).then(response => {
                  if(response.data){
                    location.reload();
                  }
                });
            },
        },
        mounted() {
            this.init();
            console.log('Sidebar mounted.')
        }
    }
</script>

Hi there. Is there any short version - without reading all your code - which tells me, what you are trying to accomplish?

1 Like

Oh sorry, on the sidebar I got a menu label which show the number of order in pending status.
I got a page for me to update the status but I don’t know how to update the sidebar menu label.
The sidebar is adminlte template.

Never mind, I have found a way by using bus event

You can change the :key attribute of your component to reload it.