如何获取Vuetify Select组件的选中值？编辑模态框场景下取id值

嘿，这事儿其实比你想的简单！你已经把v-select的核心配置做对了，现在只需要利用好v-model的绑定逻辑，就能像输入框获取文本值一样轻松拿到选中项的ID。

核心逻辑：你的v-select已经配置到位 #

先看你写的代码：

<v-select 
  prepend-icon="local_shipping" 
  :rules="[v => !!v || 'Es necesario asignarl el T.A.R.']" 
  required 
  label="T.A.R." 
  v-model="editedItem.tarID" 
  :items="tars" 
  item-text="nombre" 
  item-value="id"
></v-select>

这里的item-value="id"是关键——它告诉v-select：把选中项的id属性值直接绑定到v-model对应的变量上。所以当你选中某个T.A.R.选项时，editedItem.tarID会自动被赋值为该选项的id，完全不需要额外写方法去手动获取。

编辑模式下的具体用法 #

1. 加载编辑数据：当你点击表格条目打开编辑模态框时，只需要把原条目的tarID赋值给editedItem.tarID，v-select就会自动匹配并选中对应的选项：

// 示例：打开编辑模态框的方法
openEditModal(rowItem) {
  // 复制原条目数据到editedItem，包含tarID
  this.editedItem = { ...rowItem };
  // 开启模态框
  this.editModal = true;
}

2. 获取选中ID：当你在模态框中修改选择并准备保存时，直接读取editedItem.tarID就是你需要的选中项ID：

// 示例：保存编辑内容的方法
saveEditedItem() {
  // 这里的this.editedItem.tarID就是选中的T.A.R.的ID
  console.log('选中的T.A.R. ID:', this.editedItem.tarID);
  // 接下来就可以把这个ID和其他编辑数据一起提交处理了
}

小排查提醒 #

如果出现选中后tarID没更新的情况，可以检查两点：

• 确认tars数组里的每个对象都有正确的id字段
• 确认editedItem在data中已经正确初始化（比如editedItem: { tarID: null }）

这样就能像操作普通输入框一样，轻松搞定v-select选中项ID的获取啦！

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo