This repository has been archived on 2021-09-06. You can view files and clone it, but cannot push or open issues or pull requests.
vuejs_course/2021-02-06 cmp-adv-01-start.../src/App.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>