Vue.js下拉框选中值可获取但无法存入数据库问题求解

问题根因 #

你赋值的位置完全错误：requestItems是数组类型，你在onDrugChange中直接给数组本身添加了drugCode自定义属性，并没有修改数组内对应行的药品编码字段，所以提交到后端的数组对象里的drugCode一直是初始值0。你能打印/alert到值是因为你读的是数组额外加的属性，不是数组内元素的属性。

修复步骤 #

1. 下拉框事件传递当前行索引 #

修改模板中select的change事件，把当前循环的index作为参数传入：

<select
  name="drugCode"
  @change="onDrugChange($event, index)"
  class="form-control"
>

2. 修改onDrugChange赋值逻辑 #

改为给数组对应下标的元素的drugCode赋值，同时注意把下拉返回的字符串值转成数字，和后端字段类型匹配：

onDrugChange(event, index) {
  this.requestItems[index].drugCode = Number(event.target.value);
}

3. 可选优化：修正drugs初始值类型 #

你当前data中drugs初始定义为对象，但接口返回的是药品列表数组，建议修改初始值避免渲染异常：

data() {
  return {
    // 其他配置保持不变
    drugs: [], // 把原来的{id:0,name:""}改为空数组
    // 其他配置保持不变
  }
}

修复后提交即可看到drugCode正常入库。

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