spostato cartella lezione 08

Cristiano Magro

2024-12-30 c65c4fb21f23d097188dcc941c04b4b6ee72381b

spostato cartella lezione 08

 08 - component communication/cmp-communication-assignment-problem/.browserslistrc

 08 - component communication/cmp-communication-assignment-problem/.eslintrc.js

 08 - component communication/cmp-communication-assignment-problem/.gitignore

 08 - component communication/cmp-communication-assignment-problem/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-assignment-problem/babel.config.js

 08 - component communication/cmp-communication-assignment-problem/package-lock.json

 08 - component communication/cmp-communication-assignment-problem/package.json

 08 - component communication/cmp-communication-assignment-problem/public/favicon.ico

 08 - component communication/cmp-communication-assignment-problem/public/index.html

 08 - component communication/cmp-communication-assignment-problem/src/App.vue

 08 - component communication/cmp-communication-assignment-problem/src/components/ActiveUser.vue

 08 - component communication/cmp-communication-assignment-problem/src/components/UserData.vue

 08 - component communication/cmp-communication-assignment-problem/src/main.js

 08 - component communication/cmp-communication-assignment-solution/.browserslistrc

copy from 07 - development setup/cmp-communication-assignment-problem/.browserslistrc
copy to 08 - component communication/cmp-communication-assignment-solution/.browserslistrc

 08 - component communication/cmp-communication-assignment-solution/.eslintrc.js

copy from 07 - development setup/cmp-communication-assignment-problem/.eslintrc.js
copy to 08 - component communication/cmp-communication-assignment-solution/.eslintrc.js

 08 - component communication/cmp-communication-assignment-solution/.gitignore

copy from 07 - development setup/cmp-communication-assignment-problem/.gitignore
copy to 08 - component communication/cmp-communication-assignment-solution/.gitignore

 08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf

copy from 07 - development setup/cmp-communication-assignment-problem/HOW-TO-USE.pdf
copy to 08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf
Binary files differ

 08 - component communication/cmp-communication-assignment-solution/babel.config.js

copy from 07 - development setup/cmp-communication-assignment-problem/babel.config.js
copy to 08 - component communication/cmp-communication-assignment-solution/babel.config.js

 08 - component communication/cmp-communication-assignment-solution/package.json

copy from 07 - development setup/cmp-communication-assignment-problem/package.json
copy to 08 - component communication/cmp-communication-assignment-solution/package.json

 08 - component communication/cmp-communication-assignment-solution/public/favicon.ico

 08 - component communication/cmp-communication-assignment-solution/public/index.html

copy from 07 - development setup/cmp-communication-assignment-problem/public/index.html
copy to 08 - component communication/cmp-communication-assignment-solution/public/index.html

 08 - component communication/cmp-communication-assignment-solution/src/App.vue

New file
@@ -0,0 +1,42 @@
<template>
  <div>
    <active-user :username="user.name" :userage="user.age"></active-user>
    <user-data @set-data="setUserData"></user-data>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "Max Schwarzmüller",
        age: 31,
      },
    };
  },
  methods: {
    setUserData(name, age) {
      this.user = {
        name: name,
        age: +age
      };
    }
  }
};
</script>


<style>
html {
  font-family: sans-serif;
}

section {
  margin: 2rem auto;
  max-width: 40rem;
  border-radius: 12px;
  border: 1px solid #ccc;
  padding: 1rem;
}
</style>

 08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue

New file
@@ -0,0 +1,21 @@
<template>
  <section>
    <h2>{{ username }}</h2>
    <h3>{{ userage }} Years</h3>
  </section>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    },
    userage: {
      type: Number,
      required: true
    }
  }
};
</script>

 08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue

New file
@@ -0,0 +1,26 @@
<template>
  <section>
    <form @submit.prevent="submitData">
      <input type="text" placeholder="Your name" v-model="enteredName" />
      <input type="text" placeholder="Your age" v-model="enteredAge" />
      <button>Set User Data</button>
    </form>
  </section>
</template>

<script>
export default {
  emits: ['set-data'],
  data() {
    return {
      enteredName: "",
      enteredAge: "",
    };
  },
  methods: {
    submitData() {
      this.$emit('set-data', this.enteredName, this.enteredAge);
    }
  }
};
</script>

 08 - component communication/cmp-communication-assignment-solution/src/main.js

New file
@@ -0,0 +1,25 @@
import { createApp } from 'vue';

import ActiveUser from './components/ActiveUser.vue';
import UserData from './components/UserData.vue';
import App from './App.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
// Optional: Add styling of your choice

// Task 2: Output both components side-by-side in your main App template

// 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