修改自定义下拉框报错问题

src/components/CustomDropdown.vue

@@ -3,7 +3,7 @@
         <!-- 触发按钮 -->
         <div class="select-trigger" @click="toggleDropdown">
             <slot name="trigger">
-                {{ selectedItem ? selectedItem[displayKey] : placeholder }}
+                {{ selectedItem && selectedItem[displayKey] ? selectedItem[displayKey] : placeholder }}
             </slot>
             <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
         </div>
@@ -12,16 +12,16 @@
         <transition name="slide-fade">
             <div v-if="isOpen" class="select-dropdown">
                 <slot v-if="isOpen" name="normal"></slot>
-                <div v-if="options">
+                <div v-if="options && options.length">
-                    <div v-for="(item, index) in options" :key="index" class="dropdown-item "
+                    <div v-for="(item, index) in options" :key="index" class="dropdown-item"
                         :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
-                        <slot name="item" :item="item" >
+                        <slot name="item" :item="item">
-                            <div class="flex-between">
+                            <div class="flex-between" v-if="item">
                                 <div class="left">
                                     <p class="one">{{ item[displayKey] }}</p>
                                 </div>
                                 <div class="right">
-                                    <img v-if="selectedItem[displayKey] == item[displayKey]"
+                                    <img v-if="selectedItem && selectedItem[displayKey] === item[displayKey]"
                                         src="../assets/register/drop-selected.svg" alt="">
                                 </div>
                             </div>
@@ -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) {
+            if(e) e.stopPropagation();
-                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", '');