diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-07 23:18:45 +0300 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-19 22:05:18 +0300 |
| commit | eb154bbc9f71a923563479919578bd5053795980 (patch) | |
| tree | 94f8c3aa11b9a217785a886eccd59189e054c66c /src | |
| parent | 1ace1d91e80425eeed482b33e21838acb7f7325a (diff) | |
| download | webui-vue-eb154bbc9f71a923563479919578bd5053795980.tar.xz | |
Add refresh functionality in app header
Clicking refresh in the app header will update the :key
value for the router-view component, and trigger a
component re-render.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I15da6d2d04fc311dfc092fbe840add950180124f
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader/AppHeader.vue | 5 | ||||
| -rw-r--r-- | src/layouts/AppLayout.vue | 16 |
2 files changed, 18 insertions, 3 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index d411c1f1..e155a651 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -20,7 +20,7 @@ Power <status-icon :status="hostStatusIcon" /> </b-nav-item> - <b-nav-item> + <b-nav-item @click="refresh"> Refresh <icon-renew /> </b-nav-item> @@ -84,6 +84,9 @@ export default { getEvents() { this.$store.dispatch('eventLog/getEventLogData'); }, + refresh() { + this.$emit('refresh'); + }, logout() { this.$store.dispatch('authentication/logout'); } diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index e1bb4103..33faa381 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -1,6 +1,6 @@ <template> <div> - <app-header ref="focusTarget" /> + <app-header ref="focusTarget" @refresh="refresh" /> <b-container fluid class="page-container"> <b-row no-gutters> <b-col tag="nav" cols="12" md="3" lg="2"> @@ -8,7 +8,7 @@ </b-col> <b-col cols="12" md="9" lg="10"> <page-container> - <router-view ref="routerView" /> + <router-view ref="routerView" :key="routerKey" /> </page-container> </b-col> </b-row> @@ -27,6 +27,11 @@ export default { AppNavigation, PageContainer }, + data() { + return { + routerKey: 0 + }; + }, watch: { $route: function() { // $nextTick = DOM updated @@ -45,6 +50,13 @@ export default { focusTarget.removeAttribute('tabindex'); }); } + }, + methods: { + refresh() { + // Changing the component :key value will trigger + // a component re-rendering and 'refresh' the view + this.routerKey += 1; + } } }; </script> |