change pack to label

resources/js/vue/views/Package/AddEdit.vue

@@ -14,19 +14,44 @@
 								class="py-3 pr-3"
 							></v-text-field>
 					</v-flex>
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-						<v-autocomplete
-							multiple
+					<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
+						<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" style="position: relative" v-for="(item, key) in formData.items" :key="key">
+							<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
+							<v-autocomplete
+
 							class="py-3 pr-3"
 							:items="items"
 							item-text="name"
-							v-model="formData.items"
+							v-model="item.id"
 							item-value="id"
 							label="Select Items For Package"
 							color="black"
-						></v-autocomplete>
-					</v-flex>
+							></v-autocomplete>
+
+							<v-btn
+							absolute
+							small
+							right
+							bottom
+							color="cyan"
+							@click="duplicateForm(key)"
+							>
+							<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+						</v-btn>
+							<v-btn
+							absolute
+							small
+							left
+							bottom
+							color="red"
+							@click="removeForm(key)"
+							>
+							<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
+						</v-btn>
+						</v-flex>
+					<!-- </v-row> -->
+
+
 				</v-layout>
 				<v-layout align-center justify-center wrap class="px-5 mb-3">
 					<v-flex xs12 sm12 md12>
@@ -69,7 +94,11 @@ export default {
 				name: "",
 				result: "",
 				note: "",
-				items: []
+				items: [
+					{
+						name:''
+					}
+				]
 			},
 			items: [],
 			result: ["Pass", "Fail"],
@@ -119,7 +148,17 @@ export default {
 			if (result && result.status == 200) {
 				this.$router.push({ name: "AllPackage" });
 			}
-		}
+		},
+
+		duplicateForm(infoIndex) {
+			this.formData.items.push({
+				name: "",
+			});
+
+		},
+		removeForm(infoIndex) {
+			this.formData.items.splice(infoIndex, 1);
+		},
 	}
 };
 </script>