Aybee5 · October 14, 2019 18:08 · Oct 14, 2019 · Oct 14, 2019 · Aug 25, 2018 · Aug 16, 2018
diff --git a/App.vue b/App.vue
@@ -7,6 +7,7 @@
       <h1> {{ user.name }} </h1>
       <p> {{ user.email }} </p>
     <button> (@click="fetchUsers") Click me! </button>
+  </div>
 </template>
 
 <script>

diff --git a/App.vue b/App.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
-  div#app
-    div(
+  <div id="app">
+    <div
       v-for="user in users"
       :key="users.id"
-    )
-      h1 {{ user.name }}
-      p {{ user.email }}
-    button(@click="fetchUsers") Click me!
+    >
+      <h1> {{ user.name }} </h1>
+      <p> {{ user.email }} </p>
+    <button> (@click="fetchUsers") Click me! </button>
 </template>
 
 <script>

diff --git a/App.vue b/App.vue
@@ -20,7 +20,7 @@ export default {
   methods: {
     fetchUsers: function () {
       const baseURI = 'https://jsonplaceholder.typicode.com/users'
-      this.$http.get('${baseURI}')
+      this.$http.get(baseURI)
       .then((result) => {
         this.users = result.data
       })

diff --git a/App.vue b/App.vue
@@ -1,6 +1,9 @@
 <template lang="pug">
   div#app
-    div(v-for="user in users" :key="users.id")
+    div(
+      v-for="user in users"
+      :key="users.id"
+    )
       h1 {{ user.name }}
       p {{ user.email }}
     button(@click="fetchUsers") Click me!
@@ -16,10 +19,9 @@ export default {
   },
   methods: {
     fetchUsers: function () {
-      let baseURI = 'https://jsonplaceholder.typicode.com'
-      this.$http.get('${baseURI}/users')
+      const baseURI = 'https://jsonplaceholder.typicode.com/users'
+      this.$http.get('${baseURI}')
       .then((result) => {
-        console.log(result)
         this.users = result.data
       })
     }

diff --git a/App.vue b/App.vue
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     fetchUsers: function () {
-      const baseURI = 'https://jsonplaceholder.typicode.com'
+      let baseURI = 'https://jsonplaceholder.typicode.com'
       this.$http.get('${baseURI}/users')
       .then((result) => {
         console.log(result)

diff --git a/app.js → App.vue b/app.js → App.vue
diff --git a/app.js b/app.js
@@ -0,0 +1,41 @@
+<template lang="pug">
+  div#app
+    div(v-for="user in users" :key="users.id")
+      h1 {{ user.name }}
+      p {{ user.email }}
+    button(@click="fetchUsers") Click me!
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    return {
+      users: []
+    }
+  },
+  methods: {
+    fetchUsers: function () {
+      const baseURI = 'https://jsonplaceholder.typicode.com'
+      this.$http.get('${baseURI}/users')
+      .then((result) => {
+        console.log(result)
+        this.users = result.data
+      })
+    }
+  }
+}
+<script>
+
+<style lang="scss">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  width: 640px;
+  margin: 0 auto;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>