lesson 12: communication from child (component) to parent (app) using a custom event.

.idea/workspace.xml

@@ -2,9 +2,10 @@
 <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$/lesson11/code.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson11/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson11/styles.css" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson12/code.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson12/index.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson12/styles.css" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -64,6 +65,8 @@
         <option value="$PROJECT_DIR$/lesson11/styles.css" />
         <option value="$PROJECT_DIR$/lesson11/index.html" />
         <option value="$PROJECT_DIR$/lesson11/code.js" />
+        <option value="$PROJECT_DIR$/lesson12/index.html" />
+        <option value="$PROJECT_DIR$/lesson12/code.js" />
       </list>
     </option>
   </component>
@@ -120,7 +123,7 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="lesson11" />
+              <option name="myItemId" value="lesson12" />
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
@@ -276,7 +279,7 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="9756000" />
+    <option name="totallyTimeSpent" value="11225000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -651,10 +654,18 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/lesson11/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="585">
+          <caret line="38" column="0" lean-forward="true" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/lesson11/code.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="700">
-          <caret line="69" column="0" lean-forward="true" selection-start-line="69" selection-start-column="0" selection-end-line="69" selection-end-column="0" />
+        <state relative-caret-position="240">
+          <caret line="16" column="0" lean-forward="true" selection-start-line="16" selection-start-column="0" selection-end-line="16" selection-end-column="0" />
           <folding>
             <marker date="1496683765000" expanded="true" signature="42:310" ph="..." />
             <marker date="1496683765000" expanded="true" signature="63:242" ph="..." />
@@ -665,10 +676,18 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/lesson11/index.html">
+    <entry file="file://$PROJECT_DIR$/lesson12/code.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="585">
-          <caret line="38" column="0" lean-forward="true" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
+        <state relative-caret-position="525">
+          <caret line="35" column="0" lean-forward="true" selection-start-line="35" selection-start-column="0" selection-end-line="35" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson12/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="315">
+          <caret line="20" column="49" lean-forward="false" selection-start-line="20" selection-start-column="49" selection-end-line="20" selection-end-column="49" />
           <folding />
         </state>
       </provider>

lesson12/code.js

@@ -0,0 +1,35 @@
+Vue.component('coupon', {
+  created() {
+  },
+
+  data() {
+    return {
+    };
+  },
+
+  methods: {
+    onCouponApplied() {
+      this.$emit('applied');
+    }
+  },
+
+  props: {
+  },
+
+  template: `
+<input placeholder="Enter your coupon code" @blur="onCouponApplied" />  
+`,
+
+});
+
+const app = new Vue({
+  el: '#root',
+  data: {
+    couponApplied: false,
+  },
+  methods: {
+    onCouponApplied() {
+      this.couponApplied = true;
+    }
+  }
+});

lesson12/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" />
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <h1><span class="index">12</span>Component communication 1: custom events</h1>
+      <ul>
+        <li><a href="../lesson11">Prev</a></li>
+        <li><a href="../lesson13">Next</a></li>
+      </ul>
+    </nav>
+
+    <div id="root" class="container">
+      <coupon @applied="onCouponApplied"></coupon>
+      <h1 v-if="couponApplied">You used a coupon!</h1>
+    </div>
+
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

lesson12/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;
+}