Added eventHub events to change the showForm value

app/assets/javascripts/issue_show/index.js

 import Vue from 'vue';
+import eventHub from './event_hub';
 import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: document.getElementById('js-issuable-app'),
-  components: {
-    issuableApp,
-  },
-  data() {
-    const issuableElement = this.$options.el;
-    const issuableTitleElement = issuableElement.querySelector('.title');
-    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
-    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
-    const {
-      canUpdate,
-      endpoint,
-      issuableRef,
-    } = issuableElement.dataset;
+document.addEventListener('DOMContentLoaded', () => {
+  $('.issuable-edit').on('click', (e) => {
+    e.preventDefault();
 
-    return {
-      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-      endpoint,
-      issuableRef,
-      initialTitle: issuableTitleElement.innerHTML,
-      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
-    };
-  },
-  render(createElement) {
-    return createElement('issuable-app', {
-      props: {
-        canUpdate: this.canUpdate,
-        endpoint: this.endpoint,
-        issuableRef: this.issuableRef,
-        initialTitle: this.initialTitle,
-        initialDescriptionHtml: this.initialDescriptionHtml,
-        initialDescriptionText: this.initialDescriptionText,
+    eventHub.$emit('open.form');
+  });
+
+  return new Vue({
+    el: document.getElementById('js-issuable-app'),
+    components: {
+      issuableApp,
+    },
+    data() {
+      const issuableElement = this.$options.el;
+      const issuableTitleElement = issuableElement.querySelector('.title');
+      const issuableDescriptionElement = issuableElement.querySelector('.wiki');
+      const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
+      const {
+        canUpdate,
+        endpoint,
+        issuableRef,
+      } = issuableElement.dataset;
+
+      return {
+        canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
+        endpoint,
+        issuableRef,
+        initialTitle: issuableTitleElement.innerHTML,
+        initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
+        initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        showForm: false,
+      };
+    },
+    methods: {
+      openForm() {
+        this.showForm = true;
+        console.log(this.showForm);
       },
-    });
-  },
-}));
+    },
+    created() {
+      eventHub.$on('open.form', this.openForm);
+    },
+    beforeDestroy() {
+      eventHub.$off('open.form', this.openForm);
+    },
+    render(createElement) {
+      return createElement('issuable-app', {
+        props: {
+          canUpdate: this.canUpdate,
+          endpoint: this.endpoint,
+          issuableRef: this.issuableRef,
+          initialTitle: this.initialTitle,
+          initialDescriptionHtml: this.initialDescriptionHtml,
+          initialDescriptionText: this.initialDescriptionText,
+        },
+      });
+    },
+  });
+});

app/views/projects/issues/show.html.haml

@@ -35,7 +35,7 @@
             %li
               = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), data: {no_turbolink: true}, class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
             %li
-              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
+              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'issuable-edit'
           - if @issue.submittable_as_spam_by?(current_user)
             %li
               = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'btn-spam', title: 'Submit as spam'