Vue中存储用户下拉菜单选中值时日志输出undefined的解决方法

你当前遇到的选中值输出undefined，本质是将原生DOM实现的下拉菜单逻辑直接迁移到Vue项目时，没有把DOM层面的用户交互和Vue的响应式数据流做绑定，常见触发场景包括：

• 依赖event.target.value读取自定义结构下拉选项的值：原示例的下拉选项是无原生value属性的<a>标签，读取结果必然为undefined
• 下拉选项的点击事件没有显式传递对应的选中值，靠DOM元素属性反查值的逻辑在Vue的虚拟DOM机制下很容易出现读取偏差
• 未提前定义用于存储选中值的响应式变量，导致赋值操作没有被Vue追踪

要实现和参考示例完全一致的视觉效果，同时正常存储用户选中值，可按以下步骤调整代码：

1. 定义响应式存储结构 #

在组件的data中提前声明需要用到的变量，避免动态赋值无法被追踪的问题：

data() {
  return {
    // 存储用户最终选中的下拉值
    selectedOption: '',
    // 下拉选项列表，统一映射选项的展示文案和实际存储值，减少硬编码
    optionList: [
      { label: '链接1', value: 'link_1' },
      { label: '链接2', value: 'link_2' },
      { label: '链接3', value: 'link_3' }
    ],
    // 控制下拉面板的显示/隐藏状态
    panelVisible: false
  }
}

2. 模板部分绑定交互逻辑 #

替换原来的原生DOM事件绑定逻辑，给每个下拉选项显式传递实际存储值，绕开DOM属性读取的问题：

<div class="dropdown">
  <button 
    class="dropbtn" 
    @click="panelVisible = !panelVisible"
  >
    <!-- 按钮上展示当前已选中的值，未选中时显示默认文案 -->
    {{ selectedOption || '下拉按钮' }}
  </button>
  <div 
    class="dropdown-content" 
    v-show="panelVisible"
  >
    <a 
      v-for="item in optionList" 
      :key="item.value"
      @click="handleOptionSelect(item.value)"
    >
      {{ item.label }}
    </a>
  </div>
</div>

3. 实现选中值的存储逻辑 #

在组件methods中添加选中处理方法，完成值的存储和交互状态更新：

methods: {
  handleOptionSelect(realValue) {
    // 将传入的选中值存入响应式变量，完成持久化存储
    this.selectedOption = realValue
    // 选中后自动收起下拉面板
    this.panelVisible = false
    // 此时日志输出可正常获取到选中值，不会出现undefined
    console.log('当前选中值：', this.selectedOption)
  }
}

禁止在选项点击回调中直接通过event.target.value获取值，这种读取方式针对原生<select>控件有效，但对自定义结构的div/a标签下拉选项完全失效，是导致输出undefined的最常见原因。

内容的提问来源于stack exchange，提问作者Juliette