Vue: Distinct method in foreach component - vue.js

Question

I have a child component in foreach loop. The component has two methods what I initiate with a button on the component.
How can I make these methods unique/ every foreach iteration? Becouse if I don't make them distinct even if I push the last iteration's button the first iteration's method will start.
I tried with methodName+index: function(), but I got , expected error.
Update
My parent component:
<div v-for="(card, index) in cards" v-bind:key="index">
<CardSubComponent
:card="card"
#cardSaveSuccess="cardSuccess"
#cardSaveError="cardError"
></CardSubComponent>
</div>
My subcomponent:
<template>
<div class="box">
<b-select :id="cardSequenceID" v-model="card.sequence" #input="changeSequence">
<option
v-for="sequence in sequenceArray"
:value="sequence"
:key="sequence">
{{ sequence }}
</option>
</b-select>
</div>
</template>
<script>
export default {
props:['card'],
data(){
return {
cardSequenceID = 'sequence'+card.id
sequenceArray: [1,2,3,4,5,6,7,8,9,10],
}
},
methods: {
changeSequence(rule){
axios.post('/api/card/changeSequence', {
cardID: card.id,
weight: document.getElementById('sequence'+cardID).value
},
{
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}).then(response => {
if(response.data == 'success'){
this.$emit('cardSaveSuccess')
} else {
this.$emit('cardSaveError')
}
});
}
}
}
</script>

Answer 1

It sounds like you need to add arguments to your method calls. Something like this:
<template>
<div>
<CardSubComponent
v-for="(card, index) in cards"
:key="index"
:card="card"
#cardSaveError="cardError(card)"
#cardSaveSuccess="cardSuccess(card)"
/>
</div>
</template>
export default {
methods: {
cardError(card) {
// TODO: Add error handler here
console.log('error called with:', card.id);
},
cardSuccess(card) {
// TODO: Add success handler here
console.log('success called with:', card.id);
},
},
};
In the child component there are two things wrong:
cardSequenceID was not properly initialized (you were using = instead of :)
You were missing this in this.card.id to identify the id for your axios call
export default {
props: ['card'],
data() {
return {
sequenceArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
cardSequenceID: `sequence${card.id}`,
};
},
methods: {
changeSequence(rule) {
axios
.post(
'/api/card/changeSequence',
{
cardID: this.card.id,
weight: document.getElementById(`sequence${cardID}`).value,
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
}
)
.then(response => {
if (response.data === 'success') {
this.$emit('cardSaveSuccess');
} else {
this.$emit('cardSaveError');
}
});
},
},
};