working on displaying errors

src/CommonMethods.vue

@@ -1,10 +1,12 @@
 <script>
 import moment from 'moment'
 import axios from 'axios'
+import Error from '@/types/ErrorType.vue'
 export default {
     data() {
         return {
-            customer_list: []
+            customer_list: [],
+            errors: {}
         }
     },
     methods:{
@@ -32,6 +34,15 @@ export default {
                 minute: '2-digit',
                 second: '2-digit'})
         },
+        async error(msg) {
+            let e = new Error()
+            e.msg = msg
+            e.id = crypto.randomUUID()
+            this.errors[e.id] = e
+            setTimeout(() => {
+               delete this.errors[e.id]
+            }, 10000)
+        },
         async getCustomerList(name) {
             console.log("searching customers...")
             if (this.customer_list.length == 0) {

src/components/ErrorBanner.vue

@@ -0,0 +1,16 @@
+<template>
+    <v-row>
+        <v-list>
+            <v-list-item v-for="e in errors" :key="e.id">
+                <v-banner color="error" icon="mdi-exclamation-thick">{{ e.msg }}</v-banner>
+            </v-list-item>
+        </v-list>
+    </v-row>
+</template>
+<script>
+export default {
+    props: {
+        errors: {}
+    }
+}
+</script>

src/types/ErrorType.vue

@@ -0,0 +1,6 @@
+<script>
+export default class Error {
+    id = "";
+    msg = "";
+}
+</script>

src/views/contracts/ContractEdit.vue

@@ -63,6 +63,7 @@
                         <v-textarea rows=3 label="Office Comments" v-model="contract.office_comments"></v-textarea>
                     </v-col>
                 </v-row>
+                <ErrorBanner :errors="errors" />
             </v-container>
         </v-card-text>
         <v-card-actions>
@@ -82,6 +83,7 @@
 <script>
 import axios from 'axios'
 import DatePicker from '@vuepic/vue-datepicker'
+import ErrorBanner from '@/components/ErrorBanner.vue'
 import methods from '@/CommonMethods.vue'
 import Product from '@/types/ProductType.vue'
 export default {
@@ -89,7 +91,8 @@ export default {
         setcontract: {}
     },
     components: {
-        DatePicker
+        DatePicker,
+        ErrorBanner
     },
     watch: {
         setcontract(newval) {
@@ -147,14 +150,15 @@ export default {
             }).then(resp => {
                 console.log("Saved Contract : " + JSON.stringify(resp.data))
                 this.saving = false
-                if (this.contract.isNew) {
-                    if (resp.data == true) {
+                if (resp.data == true) {
+                  if (this.contract.isNew) {
                         this.$emit('contractupdate', resp.data)
-                    } else {
-                        console.log("Not Saved")
-                    }
+                  } else {
+                      this.$emit('contractupdate', resp.data)
+                  }
                 } else {
-                    this.$emit('contractupdate', resp.data)
+                    this.error("Contract not saved.")
+                    console.log("Not Saved")
                 }
             }).catch(err => {
                 console.log(err)