dynamic

components/DynamicInput.vue

+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <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"
+            required
+          />
+          <label>Category ID :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Parent ID"
+            v-model="category_id"
+          />
+
+          <label>Price :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Ordering"
+            v-model="ordering"
+            required
+          />
+      <button
+        type="button"
+        class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
+        @click="addMore()"
+      >
+        Add More
+      </button>
+      <div v-for="(variant, index) in variants" :key="index">
+        <div class="flex justify-start ml-2 mt-4">
+          <input
+            v-model="variant.variantName"
+            placeholder="enter you variant name"
+            class="w-full py-2 border border-indigo-500 rounded"
+          />
+          <input
+            v-model="variant.variantIndex"
+            placeholder="enter you variantIndex"
+            class="w-full py-2 border border-indigo-500 rounded"
+          />
+          <input
+            v-model="variant.variantPrice"
+            placeholder="enter you variantPrice"
+            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 text-white"
+            @click="remove(index)"
+            v-show="index != 0"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+      <b-button type="submit" variant="primary">Submit</b-button>
+    </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+  data() {
+    return {
+      name: '',
+      parent_id: '',
+      ordering: '',
+      variants: [
+        {
+          variantName: "",
+          variantIndex: "",
+          variantPrice: "",
+          
+        },
+      ],
+    };
+  },
+  methods: {
+    addMore() {
+      this.variants.push({
+        variantName: "",
+        variantIndex: "",
+        variantPrice: "",
+      });
+    },
+    remove(index) {
+      this.variants.splice(index, 1);
+    },
+    getInfo() {
+      console.log()
+    }
+  },
+};
+</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

pages/home/categories.vue

@@ -39,7 +39,6 @@
             v-model="ordering"
             required
           />
-          <b-form-select v-model="selected" :options="options"></b-form-select>
           <label>Image :</label>
           <b-form-file
             @change="fileSelected"
@@ -373,6 +372,7 @@ export default {
       
     },
     deleteCategory(ID,index) {
+      const self = this;
       this.editedIndex = this.categories.indexOf(index);
       if(confirm("Do you really want to delete?")){
       try{
@@ -380,6 +380,9 @@ export default {
         .delete(`http://127.0.0.1:8000/api/categories/${ID}`)
         .then(response => {
           this.categories.splice(this.editedIndex, 1);
+          self.$toast.success('Deleted successfully!',{
+        duration: 3000
+      });
       })
       } catch(error){
         console.log(error)

pages/home/products.vue

 <template>
-  <div>
-    <b-breadcrumb>
-    <b-breadcrumb-item href="/home">
-      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
-      Home
-    </b-breadcrumb-item>
-    <b-breadcrumb-item href="/home/categories">Product</b-breadcrumb-item>
-  </b-breadcrumb>
+  <div id="app">
+    <DynamicInput msg="Example of Dynamic Input" />
   </div>
 </template>
 
 <script>
-import { onMounted } from "vue";
-import axios from "axios";
-import VueAxios from "vue-axios";
-
-import Nav from "@/components/Nav";
-
+import DynamicInput from "@/components/DynamicInput";
 
 export default {
-  layout: "admin",
-  components: { Nav },
-  middleware: ['web'],
-  
+  layout: 'admin',
+  name: "App",
+  components: {
+    DynamicInput,
+  },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style>
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
\ No newline at end of file

pages/home/users.vue

@@ -187,7 +187,7 @@
       </template>
       <template v-slot:item.actions="{ item }">
         <v-icon small class="mr-2" @click=" editUser(item.id);" :id ="item.id"> mdi-pencil </v-icon>
-        <v-icon small @click="deleteUser(item.id)" :id ="item.id"> mdi-delete </v-icon>
+        <v-icon small @click="deleteUser(item.id, item)" :id ="item.id"> mdi-delete </v-icon>
       </template>
       <template v-slot:no-data>
         <v-btn color="primary" @click="initialize"> Reset </v-btn>
@@ -352,11 +352,15 @@ export default {
         });
         
     },
-    deleteUser(userID) {
+    deleteUser(userID, index) {
+      this.editedIndex = this.users.indexOf(index);
       if(confirm("Do you really want to delete?")){
       try{
       axios
         .delete(`http://127.0.0.1:8000/api/users/${userID}`)
+        .then(response => {
+          this.users.splice(this.editedIndex, 1);
+      })
       } catch(error){
         console.log(error)
       }