checkbox

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=ae0020c3ea87585d11e2",
-    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=a60eee632dda35e62e92",
-    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=7701333a8c35f7da26ba",
-    "/js/vue/User/app.js": "/js/vue/User/app.js?id=620f4775165bb2cb796d"
+    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=586f299c24bf749d2f3c",
+    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=f4ad28357a5e94487801",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=c4391f11fc4c91ba84a6",
+    "/js/vue/User/app.js": "/js/vue/User/app.js?id=9169814f6c1ee0c82078"
 }

resources/js/Global/components/Inputs/Checkbox.vue

@@ -1,70 +1,88 @@
 <template>
-    <div class="WM-Checkbox c-toggle-hide RTL WM-Align-R">
-        <input
-            type="checkbox"
-            :id="rand"
-            class="c-check"
-            :value="valueSelected"
-            v-model="values"
-            @change="changeValue"
-        />
-        <label :for="rand">
-            <span class="inc"></span>
-            <span class="check"></span>
-            <span class="box"></span>
-            {{ showText }}
-        </label>
-    </div>
+	<div class="WM-Checkbox c-toggle-hide RTL WM-Align-R">
+		<input
+			type="checkbox"
+			:id="rand"
+			class="c-check"
+			:value="valueSelected"
+			v-model="values"
+			@change="changeValue"
+		/>
+		<label :for="rand">
+			<span class="inc"></span>
+			<span class="check"></span>
+			<span class="box"></span>
+			{{ showText }}
+		</label>
+	</div>
 </template>
 
 <script>
 export default {
-    props: {
-        itemValue: { default: null },
-        itemText: { default: null },
-        text: { default: " " },
-        item: { default: {} },
-        color: { default: "Red" },
-        value: {type: Array},
-    },
-    data: function() {
-        return {
-            IconClass: "WMi-" + this.Icon,
-            values: this.value,
-            rand : Math.random()
-        };
-    },
-    computed: {
-        valueSelected() {
-            if (this.itemValue) {
-                return this.item[this.itemValue];
-            }
-            return this.item;
-        },
-        showText() {
-            if (this.itemText) {
-                return this.item[this.itemText];
-            }
-            return this.text;
-        },
-    },  
-    methods:{
-        changeValue($event) {
-            if (this.value) {
-                if ($event.target.checked) {
-                    this.value.push(this.valueSelected);
-                } else {
-                    let index = this.value.findIndex(x => x == this.valueSelected);
-                    this.value.splice(index, 1);
-                }
-            }
-            this.$emit('change', this.ItemID, $event.target.checked);
-        }
-    },
-    watch:{
-        value(value) {
-            this.values = value;
-        }
-    }
+	props: {
+		itemValue: { default: null },
+		itemText: { default: null },
+		text: { default: " " },
+		item: { default: {} },
+		color: { default: "Red" },
+		value: { type: Array }
+	},
+	data: function() {
+		return {
+			IconClass: "WMi-" + this.Icon,
+			rand: Math.random()
+		};
+	},
+	computed: {
+		valueSelected() {
+			if (this.itemValue) {
+				return this.item[this.itemValue];
+			}
+			return this.item;
+		},
+		showText() {
+			if (this.itemText) {
+				return this.item[this.itemText];
+			}
+			return this.text;
+		},
+		values: {
+			get() {
+				if (this.itemValue) {
+					let newval = [];
+					for (const val of this.value) {
+                        newval.push(val[this.itemValue]);
+                    }
+					return newval;
+				}
+				return this.value;
+			},
+			set() {}
+		}
+	},
+	methods: {
+		changeValue($event) {
+			if (this.value) {
+				if ($event.target.checked) {
+					this.value.push(this.valueSelected);
+				} else {
+					let index = this.value.findIndex(
+						x => x == this.valueSelected
+					);
+					this.value.splice(index, 1);
+				}
+			}
+			this.$emit("change", this.item, $event.target.checked);
+		}
+	},
+	watch: {
+		value(value) {
+			if (this.itemValue) {
+				this.values = value[this.itemValue];
+			} else {
+				this.values = value;
+			}
+		}
+	}
 };
 </script>