diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 29879fc..b176bf5 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -3,7 +3,7 @@
- {{ selectedItem ? selectedItem[displayKey] : placeholder }}
+ {{ selectedItem && selectedItem[displayKey] ? selectedItem[displayKey] : placeholder }}
@@ -12,16 +12,16 @@
-
-
+
-
-
+
+
-
@@ -53,6 +53,11 @@ export default {
options: {
type: Array,
default: () => [],
+ validator: (value) => {
+ return Array.isArray(value) && value.every(item =>
+ item && typeof item === 'object'
+ )
+ }
},
options_null: {
type: Object,
@@ -85,28 +90,47 @@ export default {
value: {
immediate: true,
handler(newVal) {
- this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
+ if (this.options && this.options.length && newVal !== undefined && newVal !== null) {
+ this.selectedItem = this.options.find((item) =>
+ item && item[this.valueKey] === newVal
+ ) || null;
+ }
},
},
+ options: {
+ immediate: true,
+ handler(newVal) {
+ if (newVal && newVal.length && this.value !== undefined && this.value !== null) {
+ this.selectedItem = newVal.find((item) =>
+ item && item[this.valueKey] === this.value
+ ) || null;
+ } else {
+ this.selectedItem = null;
+ }
+ }
+ }
},
methods: {
closeDropdown() {
this.isOpen = false;
},
toggleDropdown(e) {
- if(e) {
- e.stopPropagation();
+ if(e) e.stopPropagation();
+ if (!this.options || !this.options.length) {
+ console.warn('Dropdown options are empty');
+ return;
}
this.isOpen = !this.isOpen;
},
selectItem(item) {
+ if (!item) return;
this.selectedItem = item;
- this.$emit("input", item[this.valueKey]); // Use the specified valueKey
+ this.$emit("input", item[this.valueKey]);
this.$emit("change", item);
this.isOpen = false;
},
isSelected(item) {
- return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
+ return item && this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
},
selectNullItem() {
this.$emit("changeNormal", '');