Test HTTP GET a bus real time data

package.json

@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.16"
+    "vue": "^2.5.16",
+    "vue-resource": "^1.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-beta.15",

public/test_45_0.json

@@ -0,0 +1,30 @@
+{
+	"bus": [
+		{
+			"lat": "39.921711",
+			"lng": "-75.14846",
+			"label": "8448",
+			"trip": "352606",
+			"VehicleID": "8448",
+			"BlockID": "7603",
+			"Direction": "EastBound",
+			"destination": "Columbus Commons",
+			"late": 2,
+			"Offset": "0",
+			"Offset_sec": "21"
+		},
+		{
+			"lat": "39.924904",
+			"lng": "-75.172501",
+			"label": "8032",
+			"trip": "352633",
+			"VehicleID": "8032",
+			"BlockID": "7602",
+			"Direction": "WestBound",
+			"destination": "29th-Snyder",
+			"late": 3,
+			"Offset": "0",
+			"Offset_sec": "19"
+		}
+	]
+}

src/App.vue

@@ -7,7 +7,13 @@
    </p>
   </section>
   <section>
-   <p>data go here</p>
+   <button v-on:click="test">Test</button>
+   <h2>🚌 45</h2>
+   <ul>
+     <li v-for="arrival in bus" v-bind:key="arrival.trip">
+        {{ arrival.Direction }}, {{ arrival.late }} minutes late
+     </li>
+   </ul>
   </section>
  </div>
 </template>
@@ -18,7 +24,15 @@ export default {
   name: 'app',
   data: function () {
     return {
-      now: new Date()
+      now: new Date(),
+      bus: []
+    }
+  },
+  methods: {
+    test: function () {
+      this.$http.get('/test_45_0.json').then(response => {
+        this.bus = response.body.bus
+      })
     }
   },
   created () {

src/main.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
+import VueResource from 'vue-resource'
+
+Vue.use(VueResource);
 
 Vue.config.productionTip = false