Vue JS: одновременное получение уникального идентификатора и значения массива ввода

Я новичок в Vue и все еще учусь им пользоваться. Я учусь использовать Element UI для Vue UI. В частности, я пробую 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() я могу получить только значение номера ввода, но не идентификатор элемента, который я назначил в элементе. Как я могу получить и то, и другое (item.id и значение)?

Я ожидал, что такая js-функция может работать, но этого не произошло:

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

Я пытался найти ответ в Google, но ответ всегда показывает только 1 параметр, который я могу получить из события change.

Любая помощь будет оценена, спасибо.


javascript html vue.js vuejs2 element-ui
person Dedy Chaidir    schedule 19.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете передать свое значение ($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>
person Boussadjra Brahim    schedule 19.08.2019