bugfix: bad event handling could create duplicate quotes on save

client/src/components/AddNewQuote.vue

@@ -1,19 +1,9 @@
 <template>
   <div class="add-new-quote">
-    <button class="add-new-quote__button" @click="newQuote">+</button>
+    <button class="add-new-quote__button" @click="$emit('createQuote')">+</button>
   </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    newQuote() {
-      this.$nuxt.$emit('create-quote')
-    },
-  },
-}
-</script>
-
 <style lang="scss">
 @import '~/assets/css/components';
 

client/src/components/CollectQuote.vue

@@ -31,10 +31,10 @@ export default {
   props: ['quote'],
   methods: {
     save() {
-      this.$nuxt.$emit('save-quote', this.quote)
+      this.$emit('saveQuote', this.quote)
     },
     close() {
-      this.$nuxt.$emit('close-quote')
+      this.$emit('close')
     },
   },
 }

client/src/components/CollectQuotes.vue

@@ -1,11 +1,21 @@
 <template>
   <div>
     <CollectQuotesExplain />
-    <AddNewQuote v-if="quotes.length > 0"/>
+    <AddNewQuote v-if="quotes.length > 0" @createQuote="createQuote"/>
     <NoQuotesYet v-if="quotes.length == 0" />
-    <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
-    <AddNewQuote />
-    <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
+    <QuoteListItem
+      v-for="quote in quotes"
+      :key="quote.id"
+      :quote="quote"
+      @editQuote="editQuote"
+    />
+    <AddNewQuote @createQuote="createQuote" />
+    <CollectQuote
+      v-if="showCollectQuoteDialog"
+      :quote="collectQuote"
+      @close="closeCollectQuoteDialog"
+      @saveQuote="saveQuote"
+    />
   </div>
 </template>
 
@@ -27,32 +37,29 @@ export default {
       return quotes
     },
   },
-  created() {
-    this.$nuxt.$on('close-quote', () => {
+  methods: {
+    closeCollectQuoteDialog() {
       this.showCollectQuoteDialog = false
-    })
-
-    this.$nuxt.$on('edit-quote', (quote) => {
+    },
+    editQuote(quote) {
       this.showCollectQuoteDialog = true
       this.collectQuote = {
         id: quote.id,
         quote: quote.quote,
       }
-    })
-
-    this.$nuxt.$on('create-quote', (quote) => {
+    },
+    async saveQuote(quote) {
+      this.$engine.saveQuote(quote.id, quote.quote)
+      await this.$engine.getMyQuotes()
+      this.showCollectQuoteDialog = false
+    },
+    createQuote() {
       this.showCollectQuoteDialog = true
       this.collectQuote = {
         id: ':new:',
         quote: '',
       }
-    })
-
-    this.$nuxt.$on('save-quote', async (quote) => {
-      this.$engine.saveQuote(quote.id, quote.quote)
-      await this.$engine.getMyQuotes()
-      this.showCollectQuoteDialog = false
-    })
+    },
   },
   async fetch() {
     await this.$engine.getMyQuotes()

client/src/components/QuoteListItem.vue

@@ -17,7 +17,7 @@ export default {
   props: ['quote'],
   methods: {
     async edit() {
-      this.$nuxt.$emit('edit-quote', this.quote)
+      this.$emit('editQuote', this.quote)
     },
     async remove() {
       if (confirm('Eintrag wirklich löschen?')) {