remove ;

pages/home/products.vue

@@ -12,17 +12,23 @@
     <b-modal id="modal-create" title="create Product" class="modal fade" >
     <div class="w-full mt-4 p-10">
       <form >
-      <label>Name :</label>
-          <input
+      <label for="input-live">Name :</label>
+          <b-form-input
+            id="input-live"
             type="text"
             class="form-control mb-2"
             placeholder="name"
+            aria-describedby="input-live-help input-live-feedback"
             v-model="name"
             max="255"
-            min="1"
-            size="sm"
-            required
-          />
+            min="1"            
+            :state="nameState"
+            trim
+            >
+          </b-form-input>
+          <b-form-invalid-feedback id="input-live-feedback">
+            Enter at least 3 letters
+          </b-form-invalid-feedback>
           <label>Category ID :</label>
           <b-form-select v-model="category_id">
             <option v-for="item in categories" :value="item.id">
@@ -388,8 +394,7 @@ export default {
         {
           color: "",
           size: "",
-          quantity: "",
-          
+          quantity: "",         
         },
       ],
     message: [],
@@ -416,6 +421,9 @@ export default {
     formTitle() {
       return this.editedIndex === -1 ? "New Item" : "Edit Item";
     },
+    nameState() {
+      return this.name.length > 2 ? true : false
+    }
   },
   watch: {
     dialog(val) {
@@ -491,7 +499,7 @@ export default {
         .get("http://127.0.0.1:8000/api/categories/")
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
-          console.log(error);
+          console.log(error)
         });
     },
     getProducts() {
@@ -499,7 +507,7 @@ export default {
         .get("http://127.0.0.1:8000/api/products/")
         .then((response) => (this.products = response.data.data))
         .catch(function (error) {
-          console.log(error);
+          console.log(error)
         });
     },
     createProduct() {
@@ -522,13 +530,13 @@ export default {
       })
       .then(response => {
         this.$bvModal.hide('modal-create')
-        self.$toast.success('Category created successfully!', {
+        self.$toast.success('Product created successfully!', {
           duration: 3000
         })
       })
       .catch(errors => {
         this.$bvModal.hide('modal-create')
-        console.log(errors.response.data.message);
+        console.log(errors.response.data.message)
         this.message = errors.response.data.message;
         self.$toast.error('something went wrong while trying create!',{
           duration: 3000
@@ -563,31 +571,31 @@ export default {
           "Authorization": this.$auth.$storage.getUniversal("token")
           }
         }).then((response) => {
-          return response.json();
+          return response.json()
         });
-        this.sName = resp.data.name;
-        this.sPrice = resp.data.price;
-        this.sCategoryId = resp.data.category_id;
-        this.sDescription = resp.data.description;
-        this.sStock = resp.data.stock;
-        this.sVariants = resp.data.variants;
-        this.sImages = resp.data.images;
-        console.log(this.sVariants);
-        console.log(this.sImages);
+        this.sName = resp.data.name
+        this.sPrice = resp.data.price
+        this.sCategoryId = resp.data.category_id
+        this.sDescription = resp.data.description
+        this.sStock = resp.data.stock
+        this.sVariants = resp.data.variants
+        this.sImages = resp.data.images
+        console.log(this.sVariants)
+        console.log(this.sImages)
       } catch (error) {
         console.log(error)       
       }      
       this.$bvModal.show('modal-show')
     },
     editProduct(item) {
-      this.$bvModal.show('modal-edit');
-      this.eId = item.id;
-      this.eName = item.name;
-      this.eCategoryId = item.category_id;
-      this.ePrice = item.price;
-      this.eStock = item.stock;
-      this.eDescription = item.description;
-      this.eVariants = item.variants;      
+      this.$bvModal.show('modal-edit')
+      this.eId = item.id
+      this.eName = item.name
+      this.eCategoryId = item.category_id
+      this.ePrice = item.price
+      this.eStock = item.stock
+      this.eDescription = item.description
+      this.eVariants = item.variants    
     },
     updateProduct(ID) {
       const self = this;
@@ -610,7 +618,7 @@ export default {
         self.$toast.success('User updated successfully!',{
         duration: 3000
       });
-        console.log(response);
+        console.log(response)
       })
       } catch(error){
         console.log(error)
@@ -642,7 +650,6 @@ export default {
       console.log(this.category_id)
       console.log(this.stock)
       console.log(this.images)
-
       console.log(this.variants)
     }
   },