Move comment related pieces from MovieItem to a new MovieComment component.

Author: lbogdan

src/components/MovieComment.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="col-md-8 form-group mb-0">
+    <template v-if="isEditing">
+      <textarea
+        class="form-control"
+        rows="3"
+        placeholder="Did you like this movie?"
+        v-model="comment"
+      ></textarea>
+      <div :class="[commentWordCount > 0 ? 'text-success' : 'text-danger']">
+        {{ commentWordCount }} word{{ commentWordCount !== 1 ? 's' : '' }}
+      </div>
+    </template>
+    <div v-else v-html="formattedComment" />
+    <button class="btn btn-primary mt-2" @click="isEditing = !isEditing">
+      {{ isEditing ? 'Save comment' : 'Edit comment' }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'movie-comment',
+  data() {
+    return {
+      comment: '',
+      isEditing: false,
+    };
+  },
+  computed: {
+    commentWordCount() {
+      return this.comment.split(/\s+/).filter(word => word !== '').length;
+    },
+    formattedComment() {
+      if (!this.commentWordCount) {
+        return 'No comment yet.';
+      }
+      return `Your comment: <b>${this.comment}</b>`;
+    },
+  },
+};
+</script>

src/components/MovieItem.vue

@@ -16,60 +16,26 @@
           </div>
         </div>
         <div class="row mt-4">
-          <div class="col-md-8 form-group mb-0">
-            <template v-if="isEditing">
-              <textarea
-                class="form-control"
-                rows="3"
-                placeholder="Did you like this movie?"
-                v-model="item.comment"
-              ></textarea>
-              <div
-                :class="[commentWordCount > 0 ? 'text-success' : 'text-danger']"
-              >
-                {{ commentWordCount }} word{{
-                  commentWordCount !== 1 ? 's' : ''
-                }}
-              </div>
-            </template>
-            <div v-else v-html="formattedComment" />
-            <button
-              class="btn btn-primary mt-2"
-              @click="isEditing = !isEditing"
-            >
-              {{ isEditing ? 'Save comment' : 'Edit comment' }}
-            </button>
-          </div>
+          <movie-comment />
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import MovieComment from './MovieComment.vue';
+
 export default {
   name: 'movie-item',
-  data() {
-    return {
-      isEditing: false,
-    };
+  components: {
+    MovieComment,
   },
   props: {
     item: {
       type: Object,
       required: true,
     },
   },
-  computed: {
-    commentWordCount() {
-      return this.item.comment.split(/\s+/).filter(word => word !== '').length;
-    },
-    formattedComment() {
-      if (!this.commentWordCount) {
-        return 'No comment yet.';
-      }
-      return `Your comment: <b>${this.item.comment}</b>`;
-    },
-  },
 };
 </script>