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
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index e1bb410..33faa38 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 @@
AppNavigation,
PageContainer
},
+ data() {
+ return {
+ routerKey: 0
+ };
+ },
watch: {
$route: function() {
// $nextTick = DOM updated
@@ -45,6 +50,13 @@
focusTarget.removeAttribute('tabindex');
});
}
+ },
+ methods: {
+ refresh() {
+ // Changing the component :key value will trigger
+ // a component re-rendering and 'refresh' the view
+ this.routerKey += 1;
+ }
}
};
</script>