Vue Assignment

Studio/database.json

@@ -167,6 +167,14 @@
       "city": "rfre",
       "state": "ferf",
       "id": 21
+    },
+    {
+      "eventdate": "2021-06-01",
+      "fullname": "Nousheen",
+      "event": "Wedding",
+      "city": "rfre",
+      "state": "ferf",
+      "id": 22
     }
   ]
 }
\ No newline at end of file

Studio/src/components/About.vue

@@ -54,7 +54,7 @@
 
             <!-- Phone Number -->
             <label>Phone Number</label><br>
-            <input type="text" id="phone" name="phone" pattern="9876543210"   v-model="phone" required><br>
+            <input type="text" id="phone" name="phone" pattern="[0-9]{10}"  v-model="phone" required><br>
 
             <!-- Note for the photographer -->
             <label>Note To The Photographer</label><br>

Studio/src/components/Contact.vue

@@ -35,7 +35,7 @@
                 </div><br>
 
                 <label for="phone">Phone Number</label><br>
-                <input type="text"  v-model="user.phone"   id="phone"  name="phone"  class="form-control"  :class="{ 'is-invalid': submitted && $v.user.phone.$error }" />
+                <input type="text"  v-model="user.phone"   id="phone"  name="phone"  class="form-control" pattern="[0-9]{10}" :class="{ 'is-invalid': submitted && $v.user.phone.$error }" />
                 <div v-if="submitted && $v.user.phone.$error" :class="{invalid_feedback:isActive}">
                     <span v-if="!$v.user.phone.required">Phone Number is required</span>
                     <span v-if="!$v.user.phone.maxLength">Phone Number must contain 10 digits</span>

Studio/src/components/mixin.js

-// Creating mixin 
-export const myMixin = {
-    methods: {
-        pressed() {
-            alert("dfghjkk");
-        }
-    }
-}
-