settings & components kebab case events

Author: supalarry

frontend/src/components/app/settings/ProfileImage.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script>
-/* eslint-disable  vue/custom-event-name-casing */
 export default {
   props: ['image'],
   data: () => ({
@@ -24,11 +23,11 @@ export default {
   methods: {
     async deleteImage(imageId) {
       this.showImageSettings = false;
-      this.$emit('deleteImage', imageId);
+      this.$emit('delete-image', imageId);
     },
     async makePrimaryImage(imageId) {
       this.showImageSettings = false;
-      this.$emit('makePrimaryImage', imageId);
+      this.$emit('make-primary-image', imageId);
     },
   },
 };

frontend/src/components/shared/DropdownDisplayChoice.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script>
-/* eslint-disable  vue/custom-event-name-casing */
 export default {
   props: ['options', 'name', 'position', 'startingOption'],
   data: () => ({
@@ -26,7 +25,7 @@ export default {
     select(option) {
       this.close();
       this.currentOption = option;
-      this.$emit('saveSingleChoice', this.name, option);
+      this.$emit('save-single-choice', this.name, option);
     },
     toggle() {
       this.closed = !this.closed;

frontend/src/components/shared/DropdownDisplayChoices.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-/* eslint-disable  vue/custom-event-name-casing */
 export default {
   props: ['options', 'name', 'position', 'startingOptions', 'min', 'max'],
   data: () => ({
@@ -30,11 +29,11 @@ export default {
       if (optionIndex !== -1) {
         if (this.selectedFilters.length > this.min) {
           this.selectedFilters.splice(optionIndex, 1);
-          this.$emit('saveMultipleChoice', this.name, this.selectedFilters);
+          this.$emit('save-multiple-choice', this.name, this.selectedFilters);
         }
       } else if (this.selectedFilters.length < this.max) {
         this.selectedFilters.push(option);
-        this.$emit('saveMultipleChoice', this.name, this.selectedFilters);
+        this.$emit('save-multiple-choice', this.name, this.selectedFilters);
       }
     },
     toggle() {

frontend/src/views/app/Settings.vue

@@ -60,7 +60,7 @@
             <h1 class="inline-block mr-4 text-gray-matcha">I am</h1>
             <DropdownDisplayChoice
               class="inline-block"
-              v-on:saveSingleChoice="saveSingleChoice"
+              v-on:save-single-choice="saveSingleChoice"
               v-bind:name="'gender'"
               v-bind:starting-option="this.$store.getters.getLoggedInUser.gender"
               v-bind:options="['male', 'female', 'other']"></DropdownDisplayChoice>
@@ -69,7 +69,7 @@
             <h1 class="inline-block mr-4 text-gray-matcha">Sexuality</h1>
             <DropdownDisplayChoice
               class="inline-block"
-              v-on:saveSingleChoice="saveSingleChoice"
+              v-on:save-single-choice="saveSingleChoice"
               v-bind:name="'sexuality'"
               v-bind:starting-option="this.$store.getters.getLoggedInUser.orientation"
               v-bind:options="['heterosexual', 'homosexual', 'bisexual', 'other']"></DropdownDisplayChoice>
@@ -93,7 +93,7 @@
               v-bind:min="3"
               v-bind:max="10"
               v-bind:name="'interests'"
-              v-on:saveMultipleChoice="saveMultipleChoice"></DropdownDisplayChoices>
+              v-on:save-multiple-choice="saveMultipleChoice"></DropdownDisplayChoices>
           </div>
         </div>
         <div class="py-4 px-8 border-t border-gray-300 w-full">
@@ -122,8 +122,8 @@
             v-for="image in this.$store.getters.getLoggedInUser.images"
             :key="image.id"
             v-bind:image="image"
-            v-on:makePrimaryImage="makePrimaryImage"
-            v-on:deleteImage="deleteImage"></ProfileImage>
+            v-on:make-primary-image="makePrimaryImage"
+            v-on:delete-image="deleteImage"></ProfileImage>
         </div>
       </section>
     </div>