From 0f11e323f1e39e45ffa1674296129c27b54b15c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berkan=20=C3=9Cm=C3=BCtl=C3=BC?= <berkanumutlu1@gmail.com>
Date: Thu, 19 Sep 2024 11:29:28 +0300
Subject: [PATCH] Web > Parent, Child Data Passing

---
 .../views/components/ExampleComponent.vue     | 11 +++------
 .../resources/views/components/UserList.vue   | 24 +++++++++++++++++++
 project/resources/views/layouts/app.vue       |  1 +
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 project/resources/views/components/UserList.vue

diff --git a/project/resources/views/components/ExampleComponent.vue b/project/resources/views/components/ExampleComponent.vue
index a90f4ed..134e1c5 100644
--- a/project/resources/views/components/ExampleComponent.vue
+++ b/project/resources/views/components/ExampleComponent.vue
@@ -1,9 +1,10 @@
 <script>
 import Alert from '@project/resources/views/components/Alert.vue';
 import {CheckCircleIcon, ExclamationCircleIcon, XCircleIcon} from '@heroicons/vue/24/outline';
+import UserList from '@project/resources/views/components/UserList.vue';
 
 export default {
-    components: {Alert},
+    components: {Alert, UserList},
     data() {
         return {
             text: 'World',
@@ -268,13 +269,7 @@ export default {
                                 :data-disabled="errors.length > 0 || form.fullname === '' ? true : null">Add
                         </button>
                     </form>
-                    <div class="w-1/4 mx-auto my-4" v-if="users.length > 0">
-                        <ul>
-                            <li :key="index" v-for="(user, index) in users">{{ index + 1 + ') ' + user.fullname }}<small
-                                class="ml-2 cursor-pointer" @click="deleteUser(index)">Remove</small>
-                            </li>
-                        </ul>
-                    </div>
+                    <user-list @delete="deleteUser" :users="users"></user-list>
                 </div>
             </div>
         </div>
diff --git a/project/resources/views/components/UserList.vue b/project/resources/views/components/UserList.vue
new file mode 100644
index 0000000..1729797
--- /dev/null
+++ b/project/resources/views/components/UserList.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+    props: {
+        users: {
+            type: Array,
+            default: null
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="w-1/4 mx-auto my-4" v-if="users?.length > 0">
+        <ul>
+            <li :key="index" v-for="(user, index) in users">{{ index + 1 + ') ' + user.fullname }}<small
+                class="ml-2 cursor-pointer" @click="$emit('delete', index)">Remove</small>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/project/resources/views/layouts/app.vue b/project/resources/views/layouts/app.vue
index 42abce7..2f71a37 100644
--- a/project/resources/views/layouts/app.vue
+++ b/project/resources/views/layouts/app.vue
@@ -19,6 +19,7 @@ watch(() => currentRoute.name, (routeName) => {
     }
 }, {immediate: true});
 </script>
+
 <template>
     <component :is="layout">
         <RouterView/>