create products

pages/home/products.vue

@@ -8,7 +8,7 @@
     <b-breadcrumb-item href="/home/products">Product</b-breadcrumb-item>
   </b-breadcrumb>
   <div style="float: right">
-    <b-button v-b-modal.modal-create >New Product</b-button></div>
+    <b-button class="text-white" v-b-modal.modal-create >New Product</b-button></div>
     <b-modal id="modal-create" title="create Product" class="modal fade" >
     <div class="w-full mt-4 p-10">
       <form >
@@ -105,7 +105,7 @@
     </div>
     <template #modal-footer>
         <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-create')"  class="btn btn-danger btn-sm m-1">Close</button>
-        <button @click="getInfo();" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+        <button @click="getInfo(); createProduct();" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
     </template>
   </b-modal>
   
@@ -119,7 +119,7 @@
     >
       <template v-slot:top >
         <v-toolbar flat>
-          <v-toolbar-title>Category Manage</v-toolbar-title>
+          <v-toolbar-title>Product Manage</v-toolbar-title>
           <v-divider class="mx-4" inset vertical></v-divider>
           <v-spacer></v-spacer>
         </v-toolbar>
@@ -164,7 +164,7 @@ export default {
       price: '',
       stock: '',
       description: '',
-      images: null,
+      images: [],
       variants: [
         {
           color: "",
@@ -283,15 +283,15 @@ export default {
     },
     createProduct() {
       const self = this;
-      const set = new Set([this.images]);
-      const images = Array.from(set);
+      // const set = new Set([this.images]);
+      // const images = Array.from(set);
       axios
       .post('http://127.0.0.1:8000/api/products/',{
         name: this.name,
         price: this.price,
         category_id: this.category_id,
         description: this.description,
-        images: images,
+        images: this.images,
         variants: this.variants,
       }, {
         headers: {