在Vue.js 3中如何获取下拉列表当前选中项的完整对象？

在Vue里要实现下拉列表@change事件传递完整的TODO对象，有两种简单直接的方式：

方式一：通过ID匹配查找对象 #

把TODO的id绑定到<option>的value上，在change事件里根据ID从数组中筛选出完整对象：

<select @change="handleTodoChange">
  <option v-for="todo in todos" :key="todo.id" :value="todo.id">
    {{ todo.text }}
  </option>
</select>

// <script setup> 中的逻辑
const todos = ref([
  { id: 1, text: '完成Vue教程', done: false },
  { id: 2, text: '整理笔记', done: true },
  // 更多TODO项
])

const handleTodoChange = (event) => {
  const selectedId = Number(event.target.value)
  const selectedTodo = todos.value.find(todo => todo.id === selectedId)
  
  // 这里就能拿到完整的TODO对象了
  if (selectedTodo) {
    // 执行你的业务逻辑，比如删除、修改状态等
    console.log(selectedTodo)
  }
}

方式二：利用索引直接传递对象 #

把数组索引绑定到<option>的value上，在change事件里直接通过索引获取对应对象：

<select @change="(e) => handleTodoChange(todos[Number(e.target.value)])">
  <option v-for="(todo, index) in todos" :key="todo.id" :value="index">
    {{ todo.text }}
  </option>
</select>

// <script setup> 中的逻辑
const todos = ref([
  { id: 1, text: '完成Vue教程', done: false },
  { id: 2, text: '整理笔记', done: true },
  // 更多TODO项
])

const handleTodoChange = (selectedTodo) => {
  // 直接拿到完整的TODO对象
  console.log(selectedTodo)
  // 执行后续操作
}

注意事项 #

• 原生<select>的value只能存储字符串类型，直接绑定对象会被序列化为[object Object]，无法正常获取，因此需要通过ID或索引间接获取完整对象。
• 如果使用Vue的自定义下拉组件（如Element Plus的el-select），可以直接把对象绑定到value上，组件内部会处理对象的传递，无需额外转换。

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