60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<the-header></the-header>
|
|
<button @click="setSelectedComponent('active-goals')">
|
|
Active Goals
|
|
</button>
|
|
<button @click="setSelectedComponent('manage-goals')">
|
|
Manage Goals
|
|
</button>
|
|
<!-- <manage-goals
|
|
v-if="selectedComponent === 'manage-goals'"
|
|
></manage-goals>
|
|
<active-goals
|
|
v-if="selectedComponent === 'active-goals'"
|
|
></active-goals> -->
|
|
<keep-alive>
|
|
<component :is="selectedComponent"></component>
|
|
</keep-alive>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TheHeader from "./components/layout/TheHeader.vue";
|
|
import ManageGoals from "./components/ManageGoals";
|
|
import ActiveGoals from "./components/ActiveGoals";
|
|
|
|
export default {
|
|
components: {
|
|
TheHeader,
|
|
ManageGoals,
|
|
ActiveGoals,
|
|
},
|
|
data() {
|
|
return {
|
|
selectedComponent: "active-goals",
|
|
activeUser: {
|
|
name: "Maximilian Schwarzmüller",
|
|
description: "Site owner and admin",
|
|
role: "admin",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
setSelectedComponent(cmp) {
|
|
this.selectedComponent = cmp;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|