Vue JS：同时获取输入数组的唯一 ID 和值

Question

我是 Vue 新手，仍在学习使用它。我正在学习将 Element UI for Vue UI. Specifically, I'm trying the Input Number Component 用于数据数组。假设我有这样的数据：

dataList = [{
    id: 1,
    productName: "ABC",
    qty: 1
}, {
    id: 2,
    productName: "DEF",
    qty: 2
}];

元素是这样的：

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

脚本是这样的：

<script type="text/javascript">
    handleChange = function (value) {
        console.log(value); /* I need the item.id also not just the qty value */
    };
</script>

从函数 handleChange() 我只能得到输入数字的值，但不能得到我在元素中分配的项目 ID。我怎样才能同时获得这两个（item.id 和价值）？

我期待这样的 js 函数可以工作，但它没有:

handleChange = function(item, value) { /* */ }

我一直在尝试 google 寻找答案，但答案总是只显示我可以从 change 事件中获取的 1 个参数。

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

您可以将您的值 ($event) 作为第一个参数传递，将另一个参数作为第二个参数传递：

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

脚本：

 <script type="text/javascript">
     handleChange = function (value,id) {
        console.log(value,id); 
     };
</script>

Vue JS：同时获取输入数组的唯一 ID 和值

Vue JS : Getting Unique ID and Value of an array of input at the same time

html

javascript

vue.js

vuejs2

element-ui