remove modal

components/CreateProductModal.vue

-<template>
-  <div>
-    <b-button v-b-modal.modal-edit >New Category</b-button>
-    <b-modal id="modal-edit" title="Edit Category" class="modal fade" >
-    <div class="w-full mt-4 p-10">
-      <form @submit.prevent="getInfo">
-      <label>Name :</label>
-          <input
-            type="text"
-            class="form-control mb-2"
-            placeholder="name"
-            v-model="name"
-            max="255"
-            min="1"
-            size="sm"
-            required
-          />
-          <label>Category ID :</label>
-          <input
-            type="text"
-            class="form-control mb-2"
-            placeholder="Parent ID"
-            v-model="category_id"
-            size="sm"
-          />
-
-          <label>Price :</label>
-          <input
-            type="text"
-            class="form-control mb-2"
-            placeholder="Ordering"
-            v-model="price"
-            size="sm"
-            required
-          />
-          <label>Description :</label>
-          <input
-            type="text"
-            class="form-control mb-2"
-            placeholder="Description"
-            v-model="description"
-            size="sm"
-            required
-          />
-          <label>Stock :</label>
-          <input
-            type="text"
-            class="form-control mb-2"
-            placeholder="Stock"
-            v-model="stock"
-            size="sm"
-            required
-          />
-          <label>Image :</label>
-          <b-form-file
-            v-model="image"
-            multiple accept="image/*"
-            :state="Boolean(image)"
-            placeholder="Choose a image or drop it here..."
-            drop-placeholder="Drop file here..."
-    ></b-form-file>
-      <button
-        type="button"
-        class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 "
-        @click="addMore()"
-      >
-        Variant (+)
-      </button>
-      <div v-for="(variant, index) in variants" :key="index">
-        <div class="flex justify-start ml-2 mt-4">
-          <input
-            v-model="variant.variantColor"
-            placeholder="Color"
-            class="w-full py-2 border border-indigo-500 rounded"
-          />
-          <input
-            v-model="variant.variantSize"
-            placeholder="Size"
-            class="w-full py-2 border border-indigo-500 rounded"
-          />
-          <input
-            v-model="variant.variantQuantity"
-            placeholder="Quantity"
-            class="w-full py-2 border border-indigo-500 rounded"
-          />
-          <button
-            type="button"
-            class="ml-2 rounded-md border px-3 py-2 bg-red-600"
-            @click="remove(index)"
-            v-show="index != 0"
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    </form>
-    </div>
-  </b-modal>
-</div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      name: '',
-      category_id: '',
-      price: '',
-      stock: '',
-      description: '',
-      image: null,
-      variants: [
-        {
-          variantColor: "",
-          variantSize: "",
-          variantQuantity: "",
-          
-        },
-      ],
-    };
-  },
-  methods: {
-    addMore() {
-      this.variants.push({
-        variantColor: "",
-        variantSize: "",
-        variantQuantity: "",
-      });
-    },
-    remove(index) {
-      this.variants.splice(index, 1);
-    },
-    getInfo() {
-      console.log(this.name)
-      console.log(this.price)
-      console.log(this.category_id)
-      console.log(this.stock)
-      console.log(this.variants)
-    }
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
\ No newline at end of file