fix create component product

src/components/product/Index.vue

@@ -29,11 +29,11 @@
               <router-link
                 tag="span"
                 class="icon_action icon_edit"
-                :to="{ name: 'editProduct', params: { id: index } }"
+                :to="{ name: 'editProduct', params: { id: item.id } }"
               >
                 <ion-icon name="create-outline"></ion-icon>
               </router-link>
-              <span class="icon_action icon_del" @click="removeProduct(index)"
+              <span class="icon_action icon_del" @click="removeProduct(item.id)"
                 ><ion-icon name="trash-outline"></ion-icon
               ></span>
             </td>
@@ -60,22 +60,18 @@ export default {
     };
   },
 
-  mounted: function () {
-    if (!localStorage.getItem("products")) {
-      this.axios.get("http://127.0.0.1:8000/api/products/").then((response) => {
-        this.products = response.data
-        localStorage.setItem("products", JSON.stringify(this.products));
-      });
-    }else{
-      this.products = JSON.parse(localStorage.getItem("products"));
-    }
+  created: function () {
+    let uri = `http://127.0.0.1:8000/api/products/`;
+    this.axios.get(uri).then((response) => {
+      this.products = response.data;
+    });
   },
 
   methods: {
-    removeProduct(index) {
+    removeProduct(id) {
       if (confirm("Are you sure you want to delete products?")) {
-        this.products.splice(index, 1);
-        localStorage.setItem("products", JSON.stringify(this.products));
+        let uri = `http://127.0.0.1:8000/api/products/${id}`;
+        this.axios.delete(uri);
         this.$alertify.error("Delete product successfully");
       }
     },

src/components/product/addProduct.vue

@@ -43,40 +43,31 @@ Vue.use(VueAlertify);
 export default {
   data: function () {
     return {
-      name: '',
-      color: '',
-      price: '',
-      products: [],
+      name: "",
+      color: "",
+      price: "",
+      product: {},
     };
   },
-  created: function () {
-    if (localStorage.getItem("products")) {
-      this.products = JSON.parse(localStorage.getItem("products"));
-    }
-  },
+
   methods: {
     submit() {
-
-      if (this.name == '' || this.price == '' || this.color == '') {
+      if (this.name == "" || this.price == "" || this.color == "") {
         alert("Please fill it out completely form!!");
         return;
-      }else if(isNaN(this.price)){
+      } else if (isNaN(this.price)) {
         alert("price only accepts numeric data!!");
         return;
       }
+      this.product.name = this.name;
+      this.product.color = this.color;
+      this.product.price = this.price;
 
-      this.products.push({
-        name: this.name,
-        color: this.color,
-        price: this.price
-      });
+      let uri = `http://127.0.0.1:8000/api/products/`;
+      this.axios.post(uri, this.product)
 
-      localStorage.setItem("products", JSON.stringify(this.products));
-      this.name = '';
-      this.color = '';
-      this.price = '';
       this.$router.push({ name : 'product'});
-      this.$alertify.success("Add task successfully");
+      this.$alertify.success("Add product successfully");
     },
   },
 };

src/components/product/editProduct.vue

@@ -47,25 +47,20 @@ export default {
       name: "",
       color: "",
       price: "",
-      products: [],
+      product: null,
     };
   },
   created: function () {
-    if (localStorage.getItem("products")) {
-      this.products = JSON.parse(localStorage.getItem("products"));
-    }
-  },
-  created: function () {
-    this.products = JSON.parse(localStorage.getItem("products"));
-    
-    if (this.products[this.id]) {
-      this.name = this.products[this.id].name;
-      this.color = this.products[this.id].color;
-      this.price = this.products[this.id].price;
-    } else {
-      this.$router.push("/product");
-      this.$alertify.error('Product not found!');
-    }
+    let uri = `http://127.0.0.1:8000/api/products/${this.id}`;
+    this.axios.get(uri).then((response) => {
+      this.product = response.data;
+      this.name = this.product.name;
+      this.color = this.product.color;
+      this.price = this.product.price;
+    }).catch(() => {
+        this.$router.push("/product");
+        this.$alertify.error('Product not found!');
+    });
   },
   methods: {
     submit() {
@@ -77,16 +72,15 @@ export default {
         return;
       }
 
-      this.products[this.id].name = this.name
-      this.products[this.id].color = this.color
-      this.products[this.id].price = this.price
+      this.product.name = this.name;
+      this.product.color = this.color;
+      this.product.price = this.price;
+
+      let uri = `http://127.0.0.1:8000/api/products/${this.id}`;
+      this.axios.put(uri, this.product);
 
-      localStorage.setItem("products", JSON.stringify(this.products));
-      this.name = "";
-      this.color = "";
-      this.price = "";
       this.$router.push({ name: "product" });
-      this.$alertify.warning("Add task successfully");
+      this.$alertify.warning("Edit product successfully");
     },
   },
 };