Fixed a bunch of errors with invalid prop

Use v-model on textrea

3 files changed, 26 insertions, 19 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 752d07f7ef0..770a0dcd27e 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -37,7 +37,7 @@ export default {
   },
   data() {
     const store = new Store({
-      title: this.initialTitle,
+      titleHtml: this.initialTitle,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
     });
@@ -86,6 +86,7 @@ export default {
       :title-html="state.titleHtml"
       :title-text="state.titleText" />
     <description-component
+      v-if="state.descriptionHtml"
       :can-update="canUpdate"
       :description-html="state.descriptionHtml"
       :description-text="state.descriptionText"
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 18e73960e34..770bf68e093 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -43,16 +43,7 @@
             .attr('title', toolTipTime)
             .tooltip('fixTitle');
 
-          $(this.$refs['gfm-entry-content']).renderGFM();
-
-          if (this.canUpdate) {
-            // eslint-disable-next-line no-new
-            new gl.TaskList({
-              dataType: 'issue',
-              fieldName: 'description',
-              selector: '.detail-page-description',
-            });
-          }
+          this.renderGFM();
         });
       },
       taskStatus() {
@@ -77,17 +68,32 @@
         }
       },
     },
+    methods: {
+      renderGFM() {
+        $(this.$refs['gfm-entry-content']).renderGFM();
+
+        if (this.canUpdate) {
+          // eslint-disable-next-line no-new
+          new gl.TaskList({
+            dataType: 'issue',
+            fieldName: 'description',
+            selector: '.detail-page-description',
+          });
+        }
+      },
+    },
+    mounted() {
+      this.renderGFM();
+    },
   };
 </script>
 
 <template>
   <div
-    v-if="descriptionHtml"
     class="description"
     :class="{
       'js-task-list-container': canUpdate
-    }"
-  >
+    }">
     <div
       class="wiki"
       :class="{
@@ -95,12 +101,12 @@
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
       v-html="descriptionHtml"
-      ref="gfm-content"
-    >
+      ref="gfm-content">
     </div>
     <textarea
       class="hidden js-task-list-field"
       v-if="descriptionText"
-    >{{ descriptionText }}</textarea>
+      v-model="descriptionText">
+    </textarea>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 9c759dc53cb..8e89a2b7730 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -1,11 +1,11 @@
 export default class Store {
   constructor({
-    title,
+    titleHtml,
     descriptionHtml,
     descriptionText,
   }) {
     this.state = {
-      titleHtml: title,
+      titleHtml,
       titleText: '',
       descriptionHtml,
       descriptionText,