lesson 6: exercise with lists.

.idea/workspace.xml

@@ -4,6 +4,7 @@
     <list default="true" id="0f813586-48e2-4acf-8923-221617ab434f" name="Default" comment="">
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson6/code.js" afterPath="$PROJECT_DIR$/lesson6/code.js" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson6/index.html" afterPath="$PROJECT_DIR$/lesson6/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson6/styles.css" afterPath="$PROJECT_DIR$/lesson6/styles.css" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -15,21 +16,21 @@
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
     <leaf>
-      <file leaf-file-name="index.html" pinned="false" current-in-tab="true">
+      <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/lesson6/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="285">
-              <caret line="19" column="54" lean-forward="false" selection-start-line="19" selection-start-column="54" selection-end-line="19" selection-end-column="54" />
+            <state relative-caret-position="330">
+              <caret line="22" column="59" lean-forward="false" selection-start-line="22" selection-start-column="59" selection-end-line="22" selection-end-column="59" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="code.js" pinned="false" current-in-tab="false">
+      <file leaf-file-name="code.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/lesson6/code.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="225">
-              <caret line="15" column="0" lean-forward="false" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
+            <state relative-caret-position="450">
+              <caret line="30" column="69" lean-forward="false" selection-start-line="30" selection-start-column="69" selection-end-line="30" selection-end-column="69" />
               <folding />
             </state>
           </provider>
@@ -43,8 +44,9 @@
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
-        <option value="$PROJECT_DIR$/lesson6/code.js" />
+        <option value="$PROJECT_DIR$/lesson6/styles.css" />
         <option value="$PROJECT_DIR$/lesson6/index.html" />
+        <option value="$PROJECT_DIR$/lesson6/code.js" />
       </list>
     </option>
   </component>
@@ -145,12 +147,12 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1496664325689</updated>
-      <workItem from="1496664327039" duration="841000" />
+      <workItem from="1496664327039" duration="1837000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="841000" />
+    <option name="totallyTimeSpent" value="1837000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -189,18 +191,26 @@
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/lesson6/code.js">
+    <entry file="file://$PROJECT_DIR$/lesson6/styles.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="225">
-          <caret line="15" column="0" lean-forward="false" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
+        <state relative-caret-position="285">
+          <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" />
           <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/lesson6/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="285">
-          <caret line="19" column="54" lean-forward="false" selection-start-line="19" selection-start-column="54" selection-end-line="19" selection-end-column="54" />
+        <state relative-caret-position="330">
+          <caret line="22" column="59" lean-forward="false" selection-start-line="22" selection-start-column="59" selection-end-line="22" selection-end-column="59" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson6/code.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="450">
+          <caret line="30" column="69" lean-forward="false" selection-start-line="30" selection-start-column="69" selection-end-line="30" selection-end-column="69" />
           <folding />
         </state>
       </provider>

lesson6/code.js

@@ -13,6 +13,23 @@ const app = new Vue({
   },
 
   computed: {
+    completeTasks() {
+      return this.tasks.filter(task => task.completed);
+    },
+
+    incompleteTasks() {
+      return this.tasks.filter(task => !task.completed);
+    }
+  },
+
+  methods: {
+    onComplete(e) {
+      this.tasks[e.target.getAttribute('data-key')].completed = true;
+    },
+
+    onIncomplete(e) {
+      this.tasks[e.target.getAttribute('data-key')].completed = false;
+    }
   }
 });
 

lesson6/index.html

@@ -16,8 +16,23 @@
     </nav>
 
     <div id="root">
+      <h2>All tasks</h2>
       <ul>
-        <li v-for="task in tasks" v-if="task.completed" v-text="task.description" />
+        <li v-for="(task,index) in tasks">
+          {{ task.description }}
+          <button v-bind:data-key="index" v-on:click="onIncomplete">Incomplete</button>
+          <button v-bind:data-key="index" v-on:click="onComplete">Complete</button>
+        </li>
+      </ul>
+
+      <h2>Complete tasks</h2>
+      <ul>
+        <li v-for="task in completeTasks" v-text="task.description" />
+      </ul>
+
+      <h2>Incomplete tasks</h2>
+      <ul>
+        <li v-for="task in incompleteTasks" v-text="task.description" />
       </ul>
     </div>
 

lesson6/styles.css

@@ -14,14 +14,6 @@ button {
   display: none;
 }
 
-.royal {
-  color: red;
-}
-
-.cardinal {
-  color: purple;
-}
-
-.is-loading {
-  background-color: red;
+li button {
+  display: inline-block;
 }