[Vuejs]-Vue: Distinct method in foreach component

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:

1. cardSequenceID was not properly initialized (you were using = instead of :)
2. 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');
          }
        });
    },
  },
};