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

Question

I am new in Vue and still learning using it. I am learning to use the Element UI for Vue UI. Specifically, I'm trying the Input Number Component, for an array of data. Let say I have my data like this:

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

And the element goes like this:

<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>

And for the script goes like this:

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

from the function handleChange() I only can get the value of input number, but not the item id that I've assign in the element. How can I get both of that (item.id and value)?

I was expecting a js function like this could work, but it didnt:

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

I've been trying to google for some answer, but the answer always showing only 1 parameter that i can acquire from change event.

Any help would be appreciated, thank you.

Boussadjra Brahim · Accepted Answer · 2019-08-19 08:46:05Z

1

You could pass your value ($event) as first parameter and the other parameter as the second one :

 <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 :

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

edited Aug 19, 2019 at 8:46

answered Aug 19, 2019 at 8:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related