Vue+Element UI：如何同时获取数组输入框的ID与值？

嘿，我来帮你搞定这个问题！你遇到的情况是Element的Input Number组件默认的change事件只返回当前输入的数值，没法直接拿到对应的item.id，不过我们可以通过箭头函数包装的方式把额外参数传进去，具体步骤如下：

1. 修改模板中的事件绑定 #

把原来的@change="handleChange"改成用箭头函数传递两个参数：当前的数值val和当前项的id：

<div v-for="(item, index) in dataList" v-bind:key="item.id">
  <el-input-number v-model="item.qty" @change="(val) => handleChange(val, item.id)"></el-input-number>
</div>

2. 调整handleChange函数的参数 #

现在你的handleChange函数就可以同时接收数值和id两个参数了：

<script type="text/javascript">
handleChange = function (value, itemId) {
  console.log('当前数值:', value);
  console.log('对应item的id:', itemId);
  // 这里就可以同时处理数值和对应的id啦
};
</script>

额外小技巧：传递完整item对象 #

如果你需要整个item对象而不只是id，也可以直接传递item：

<el-input-number v-model="item.qty" @change="(val) => handleChange(val, item)"></el-input-number>

对应的函数就改成：

handleChange = function (value, item) {
  console.log('数值:', value);
  console.log('完整的item对象:', item);
};

原理说明 #

Element UI的Input Number组件的change事件默认只会触发并传递当前的数值参数，所以我们需要用箭头函数作为中间层，把当前循环项的额外数据（比如id或整个item）一并传递给回调函数，这样就能在handleChange里同时获取到你需要的信息了。

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