如何获取select类下拉菜单选中值并在Vue中展示？

针对你的需求，用Vue的双向绑定就能快速实现，同时修正原代码里的问题以适配多用户场景：

核心修改点 #

• 给<select>添加v-model绑定到session.user.selection，实现选中值自动同步
• 给每个<option>设置唯一有效的value（原代码里value全为空，选了也拿不到有效数据）
• 确保每个用户的session.user实例独立（后端做好会话隔离的话，前端无需额外处理）

完整代码示例 #

<div>
  <!-- 绑定v-model到用户选择变量 -->
  <select class="selection" v-model="session.user.selection">
    <!-- 给每个选项设置对应value -->
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
  </select>
  <!-- 展示选中值，未选择时给出提示 -->
  <div>你选中的是：{{ session.user.selection || '请选择一个选项' }}</div>
</div>

关键说明 #

1. 双向绑定逻辑：v-model会自动将选中选项的value赋值给session.user.selection；如果这个变量有初始值，下拉菜单会自动选中对应选项。
2. 多用户隔离：只要后端通过会话ID等方式保证每个用户的session独立，前端的session.user.selection自然对应当前用户的选择，不会和其他用户冲突。
3. 空状态优化：通过|| '请选择一个选项'的判断，避免未选择时页面展示空内容。

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