add components

2021-02-01 cmp-communication-assignment-problem/src/App.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <h1>User App</h1>
+        <active-user></active-user>
+        <user-data></user-data>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

2021-02-01 cmp-communication-assignment-problem/src/components/ActiveUser.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h2>{{ username }}</h2>
+        <h3>{{ age }}</h3>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            username: "Maxi",
+            age: 18,
+        };
+    },
+};
+</script>

2021-02-01 cmp-communication-assignment-problem/src/components/UserData.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <form @submit.prevent="returnData">
+            <div>
+                <label>Username: </label>
+                <input type="text" />
+            </div>
+            <div>
+                <label>Age: </label>
+                <input type="number" />
+            </div>
+            <div><button>Add User</button></div>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        returnData() {},
+    },
+};
+</script>

2021-02-01 cmp-communication-assignment-problem/src/main.js

@@ -1,9 +1,19 @@
-import { createApp } from 'vue'
+"use strict";
 
-createApp({}).mount('#app')
+import { createApp } from "vue";
 
-// Task 1: 
-// Add two components to the app: 
+import App from "./App.vue";
+import ActiveUser from "./components/ActiveUser.vue";
+import UserData from "./components/UserData.vue";
+
+const app = createApp(App);
+
+app.component("active-user", ActiveUser);
+app.component("user-data", UserData);
+
+app.mount("#app");
+// Task 1:
+// Add two components to the app:
 // An ActiveUser component and an UserData component
 // ActiveUser should output a username (h2) and age (h3)
 // UserData should output two input fields => for name and age
@@ -13,4 +23,4 @@ createApp({}).mount('#app')
 
 // Task 3: Add user data and ensure it contains a name and age
 // User data should be output in ActiveUser
-// It should be updated via the UserData component
+// It should be updated via the UserData component