From ab1a9701c066a02994f2bf1426bbd035e41fb5f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Cort=C3=A9s?= <daniel.cortes.p159@gmail.com>
Date: Sun, 16 Jun 2019 22:09:40 -0400
Subject: [PATCH] Agregado userindex

---
 resources/js/app.js              |  5 ++++
 resources/js/views/App.vue       |  1 +
 resources/js/views/UserIndex.vue | 39 ++++++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 resources/js/views/UserIndex.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index ccbb931..55785a2 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -20,6 +20,11 @@ const router = new VueRouter({
             name: 'hello',
             component: Hello,
         },
+        {
+            path: '/users',
+            name: 'users.index',
+            component: UsersIndex,
+        },
     ],
 });
 
diff --git a/resources/js/views/App.vue b/resources/js/views/App.vue
index 74c7670..744da8f 100644
--- a/resources/js/views/App.vue
+++ b/resources/js/views/App.vue
@@ -4,6 +4,7 @@
         <p>
             <router-link :to="{ name: 'home' }">Home</router-link>
             <router-link :to="{ name: 'hello' }">Hello World</router-link>
+            <router-link :to="{ name: 'users.index' }">Users</router-link>
         </p>
         
         <div class="container">
diff --git a/resources/js/views/UserIndex.vue b/resources/js/views/UserIndex.vue
new file mode 100644
index 0000000..60843a8
--- /dev/null
+++ b/resources/js/views/UserIndex.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="users">
+        <div class="loading" v-if="loading">Loading...</div>
+        <div v-if="error" class="error">{{ error }}</div>
+        <ul v-if="users">
+            <li v-for="{ name, email } in users">
+                <strong>Name:</strong>  {{ name }},
+                <strong>Email:</strong> {{ email}}
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+import axios from 'axios';
+export default {
+    data() {
+        return {
+            loading: false,
+            users: null,
+            error: null,
+        };
+    },
+    created() {
+        this.fetchData();
+    },
+    methods: {
+        fetchData() {
+            this.error = this.users = null;
+            this.loading = true;
+            axios
+                .get('/api/users')
+                .then(response => {
+                    this.loading = false;
+                    this.users = response.data;
+                });
+        }
+    }
+}
+</script>