尝试处理Vue自定义选择框下拉菜单时出错？

<template>
  <div class="custom-select">
    <input type="text" :value="selectedValue" @click="toggleDropdown" readonly />
    <div v-if="isDropdownVisible" class="dropdown-menu">
      <div v-for="option in options" :key="option.value" @click="selectOption(option)">
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedValue = ref('');
    const isDropdownVisible = ref(false);
    const options = ref([
      { label: 'Option 1', value: '1' },
      { label: 'Option 2', value: '2' },
      { label: 'Option 3', value: '3' }
    ]);

    const toggleDropdown = () => {
      isDropdownVisible.value = !isDropdownVisible.value;
    };

    const selectOption = (option) => {
      selectedValue.value = option.value;
      isDropdownVisible.value = false;
    };

    return {
      selectedValue,
      isDropdownVisible,
      options,
      toggleDropdown,
      selectOption
    };
  }
};
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}

.dropdown-menu {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
}

.dropdown-menu div {
  padding: 8px;
  cursor: pointer;
}

.dropdown-menu div:hover {
  background-color: #f0f0f0;
}
</style>