Gurantee all data functions return an object32138-vue-warning

10 files changed, 71 insertions, 38 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 88eb4251339..fb48f99716f 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -50,17 +50,19 @@ $(() => {
       'board-sidebar': gl.issueBoards.BoardSidebar,
       'board-add-issues-modal': gl.issueBoards.IssuesModal,
     },
-    data: {
-      state: Store.state,
-      loading: true,
-      endpoint: $boardApp.dataset.endpoint,
-      boardId: $boardApp.dataset.boardId,
-      disabled: $boardApp.dataset.disabled === 'true',
-      issueLinkBase: $boardApp.dataset.issueLinkBase,
-      rootPath: $boardApp.dataset.rootPath,
-      bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-      detailIssue: Store.detail,
-      defaultAvatar: $boardApp.dataset.defaultAvatar,
+    data() {
+      return {
+        state: Store.state,
+        loading: true,
+        endpoint: $boardApp.dataset.endpoint,
+        boardId: $boardApp.dataset.boardId,
+        disabled: $boardApp.dataset.disabled === 'true',
+        issueLinkBase: $boardApp.dataset.issueLinkBase,
+        rootPath: $boardApp.dataset.rootPath,
+        bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
+        detailIssue: Store.detail,
+        defaultAvatar: $boardApp.dataset.defaultAvatar,
+      };
     },
     computed: {
       detailIssueVisible () {
@@ -106,8 +108,10 @@ $(() => {
 
   gl.IssueBoardsSearch = new Vue({
     el: document.getElementById('js-add-list'),
-    data: {
-      filters: Store.state.filters
+    data() {
+      return {
+        filters: Store.state.filters,
+      };
     },
     mounted () {
       gl.issueBoards.newListDropdownInit();
@@ -117,9 +121,11 @@ $(() => {
   gl.IssueBoardsModalAddBtn = new Vue({
     mixins: [gl.issueBoards.ModalMixins],
     el: document.getElementById('js-add-issues-btn'),
-    data: {
-      modal: ModalStore.store,
-      store: Store.state,
+    data() {
+      return {
+        modal: ModalStore.store,
+        store: Store.state,
+      };
     },
     watch: {
       disabled() {
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
index 13569df0c20..6708c245391 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js
@@ -5,7 +5,9 @@ const ModalStore = gl.issueBoards.ModalStore;
 gl.issueBoards.ModalEmptyState = Vue.extend({
   mixins: [gl.issueBoards.ModalMixins],
   data() {
-    return ModalStore.store;
+    return {
+      state: ModalStore.store,
+    };
   },
   props: {
     image: {
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index e2b3f9ae7e2..bc42d3905e6 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -22,7 +22,9 @@ gl.issueBoards.ModalHeader = Vue.extend({
     },
   },
   data() {
-    return ModalStore.store;
+    return {
+      state: ModalStore.store,
+    };
   },
   computed: {
     selectAllText() {
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 507f16f3f06..4c6dd1f872d 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -43,7 +43,9 @@ gl.issueBoards.IssuesModal = Vue.extend({
     },
   },
   data() {
-    return ModalStore.store;
+    return {
+      state: ModalStore.store,
+    };
   },
   watch: {
     page() {
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index 363269c0d5d..2b4d9c955f1 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -21,7 +21,9 @@ gl.issueBoards.ModalList = Vue.extend({
     },
   },
   data() {
-    return ModalStore.store;
+    return {
+      state: ModalStore.store,
+    };
   },
   watch: {
     activeTab() {
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js b/app/assets/javascripts/boards/components/modal/tabs.js
index 3e5d08e3d75..69c0a22d8cf 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js
+++ b/app/assets/javascripts/boards/components/modal/tabs.js
@@ -5,7 +5,9 @@ const ModalStore = gl.issueBoards.ModalStore;
 gl.issueBoards.ModalTabs = Vue.extend({
   mixins: [gl.issueBoards.ModalMixins],
   data() {
-    return ModalStore.store;
+    return {
+      state: ModalStore.store,
+    };
   },
   computed: {
     selectedCount() {
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index c8e53cb554e..e7e6d5d9bf2 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -30,14 +30,16 @@ $(() => {
   gl.cycleAnalyticsApp = new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
-    data: {
-      state: cycleAnalyticsStore.state,
-      isLoading: false,
-      isLoadingStage: false,
-      isEmptyStage: false,
-      hasError: false,
-      startDate: 30,
-      isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+    data() {
+      return {
+        state: cycleAnalyticsStore.state,
+        isLoading: false,
+        isLoadingStage: false,
+        isEmptyStage: false,
+        hasError: false,
+        startDate: 30,
+        isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+      };
     },
     computed: {
       currentStage() {
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index 6504d7db2f2..1fdf3c47ee9 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -16,10 +16,12 @@ class CycleAnalyticsService {
       method: 'GET',
       dataType: 'json',
       contentType: 'application/json',
-      data: {
-        cycle_analytics: {
-          start_date: options.startDate,
-        },
+      data() {
+        return {
+          cycle_analytics: {
+            start_date: options.startDate,
+          },
+        };
       },
     });
   }
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 3db64339a62..acc40b19290 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -8,14 +8,21 @@ export default {
       required: true,
     },
   },
-  data: () => ({ pipelinesEmptyStateSVG }),
+  data() {
+    return {
+      pipelinesEmptyStateSVG,
+    };
+  },
 };
 </script>
 
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+      <div
+        class="svg-content"
+        v-html="pipelinesEmptyStateSVG">
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">
@@ -25,7 +32,9 @@ export default {
           Continous Integration can help catch bugs by running your tests automatically,
           while Continuous Deployment can help you deliver code to your product environment.
         </p>
-        <a :href="helpPagePath" class="btn btn-info">
+        <a
+          :href="helpPagePath"
+          class="btn btn-info">
           Get started with Pipelines
         </a>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/error_state.vue b/app/assets/javascripts/pipelines/components/error_state.vue
index 90cee68163e..853d049e2f7 100644
--- a/app/assets/javascripts/pipelines/components/error_state.vue
+++ b/app/assets/javascripts/pipelines/components/error_state.vue
@@ -2,14 +2,18 @@
 import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
 
 export default {
-  data: () => ({ pipelinesErrorStateSVG }),
+  data() {
+    return {
+      pipelinesErrorStateSVG,
+    };
+  },
 };
 </script>
 
 <template>
   <div class="row empty-state js-pipelines-error-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+      <div class="svg-content" v-html="pipelinesErrorStateSVG"></div>
     </div>
 
     <div class="col-xs-12 text-center">