lesson 18: Vue Ajax with Axios.

.idea/workspace.xml

@@ -2,10 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="0f813586-48e2-4acf-8923-221617ab434f" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson17/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson17/lesson/src/components/Counter.vue" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson17/styles.css" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson17/index.html" afterPath="$PROJECT_DIR$/lesson17/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson18/index.html" afterPath="$PROJECT_DIR$/lesson18/index.html" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -86,9 +84,10 @@
         <option value="$PROJECT_DIR$/lesson16/hello-vue/src/App.vue" />
         <option value="$PROJECT_DIR$/lesson16/hello-vue/src/components/Message.vue" />
         <option value="$PROJECT_DIR$/lesson16/index.html" />
-        <option value="$PROJECT_DIR$/lesson17/index.html" />
         <option value="$PROJECT_DIR$/lesson17/lesson/src/App.vue" />
         <option value="$PROJECT_DIR$/lesson17/lesson/src/components/Counter.vue" />
+        <option value="$PROJECT_DIR$/lesson18/index.html" />
+        <option value="$PROJECT_DIR$/lesson17/index.html" />
       </list>
     </option>
   </component>
@@ -137,6 +136,34 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="Vue Laracasts" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="laracasts" />
+              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lesson18" />
+              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
+            </PATH_ELEMENT>
+          </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="Vue Laracasts" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="laracasts" />
+              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="lesson17" />
+              <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
+            </PATH_ELEMENT>
+          </PATH>
         </subPane>
       </pane>
       <pane id="Scratches" />
@@ -301,12 +328,12 @@
       <workItem from="1496781382437" duration="54000" />
       <workItem from="1496781620611" duration="7000" />
       <workItem from="1496781629483" duration="2926000" />
-      <workItem from="1497298954145" duration="1217000" />
+      <workItem from="1497298954145" duration="1316000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="19799000" />
+    <option name="totallyTimeSpent" value="19898000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1436" height="877" extended-state="6" />
@@ -316,8 +343,8 @@
       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3299363" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="true" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.27116212" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
+      <window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3299363" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.27116212" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
       <window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
@@ -571,7 +598,6 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/lesson18/skills.json" />
     <entry file="file://$PROJECT_DIR$/lesson18/code.js" />
-    <entry file="file://$PROJECT_DIR$/lesson18/index.html" />
     <entry file="file://$PROJECT_DIR$/lesson15/index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="225">
@@ -648,14 +674,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/lesson17/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="405">
-          <caret line="27" column="0" lean-forward="true" selection-start-line="27" selection-start-column="0" selection-end-line="27" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/lesson17/lesson/package-lock.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="318">
@@ -696,5 +714,21 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/lesson17/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="375">
+          <caret line="25" column="9" lean-forward="true" selection-start-line="25" selection-start-column="9" selection-end-line="25" selection-end-column="9" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson18/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="180">
+          <caret line="12" column="32" lean-forward="false" selection-start-line="12" selection-start-column="32" selection-end-line="12" selection-end-column="32" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

lesson17/index.html

@@ -17,7 +17,7 @@
 
     <h1>Go to <a href="hello-vue/index.html">App</a></h1>
     <p>Be sure to run <code>yarn ; yarn dev</code> in the
-      <code>hello-vue</code> directory to start the webpack dev server.</p>
+      <code>lesson</code> directory to start the webpack dev server.</p>
     <div id="root" class="container">
     </div>
 

lesson18/code.js

@@ -0,0 +1,15 @@
+Vue.prototype.$http = axios;
+
+const app = new Vue({
+  el: '#root',
+
+  data: {
+    skills: [],
+  },
+
+  mounted() {
+    // Make an Ajax request to our server, on /skills.json
+    this.$http.get('skills.json')
+      .then(response => console.log(this.skills = response.data));
+  }
+});

lesson18/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <h1><span class="index">18</span>Vue Ajax requests with Axios</h1>
+      <ul>
+        <li><a href="../lesson17">Prev</a></li>
+        <li><a href="../lesson19">Next</a></li>
+      </ul>
+    </nav>
+
+    <div id="root">
+      <ul>
+        <li v-for="skill in skills" v-text="skill"></li>
+      </ul>
+    </div>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script -->
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

lesson18/skills.json

@@ -0,0 +1,7 @@
+[
+  "Laravel",
+  "Vue",
+  "PHP",
+  "JavaScript",
+  "Tooling"
+]

lesson18/styles.css

@@ -0,0 +1,19 @@
+body {
+  padding-top: 40px;
+}
+
+nav li {
+  display: inline;
+}
+
+nav h1 span {
+  margin-right: 0.3em;
+}
+
+button {
+  display: block;
+}
+
+[v-cloak] {
+  display: none;
+}