Use kebab-case for vue names

https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
armadillica · Apr 4, 2019 · 5c431d3 · 5c431d3
1 parent c3096e9
commit 5c431d3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/scripts/js/es6/common/vuecomponents/App.js b/src/scripts/js/es6/common/vuecomponents/App.js
@@ -8,8 +8,8 @@ const TEMPLATE =`
         :projectId="projectId"
         :selectedIds="currentSelectedIds"
         :componentState="initialTableState"
-        @selectItemsChanged="onSelectItemsChanged"
-        @componentStateChanged="onTableStateChanged"
+        @selected-items-changed="onSelectItemsChanged"
+        @component-state-changed="onTableStateChanged"
     />
 </div>
 `;

diff --git a/src/scripts/js/es6/common/vuecomponents/jobstable/rows/filter/RowFilter.js b/src/scripts/js/es6/common/vuecomponents/jobstable/rows/filter/RowFilter.js
@@ -6,15 +6,15 @@ const TEMPLATE =`
     <name-filter 
         :rowObjects="rowObjects"
         :componentState="(componentState || {}).nameFilter"
-        @visibleRowObjectsChanged="onNameFiltered"
-        @componentStateChanged="onNameFilterStateChanged"
+        @visible-row-objects-changed="onNameFiltered"
+        @component-state-changed="onNameFilterStateChanged"
     />
     <status-filter
         :availableStatuses="availableStatuses"
         :rowObjects="nameFilteredRowObjects"
         :componentState="(componentState || {}).statusFilter"
-        @visibleRowObjectsChanged="$emit('visibleRowObjectsChanged', ...arguments)"
-        @componentStateChanged="onStatusFilterStateChanged"
+        @visible-row-objects-changed="$emit('visible-row-objects-changed', ...arguments)"
+        @component-state-changed="onStatusFilterStateChanged"
     />
 </div>
 `;
@@ -72,7 +72,7 @@ let RowFilter = {
     },
     watch: {
         currentComponentState(newValue) {
-            this.$emit('componentStateChanged', newValue);
+            this.$emit('component-state-changed', newValue);
         }
     },
     components: {