How to get selected value with append-outer click on vue?

Question

I have multiple cards, each one with unique IDs and tasks, as seen in the sc: Cards

How do I get the value from the card's v-select, when append-outer-icon (plus sign) is clicked?

      <v-container fluid>
        <v-row dense align="center" justify="center">
          <v-col cols="2" v-for="card in cards" :key="card.id">
            <v-card class="mx-auto">
              <v-card-title> {{ card.name }} </v-card-title>
              <v-card-subtitle> {{ card.id }} </v-card-subtitle>
              <v-card-actions>
                <v-select
                  :items="items"
                  item-text="name"
                  item-value="value"
                  label="Do stuff"
                  dense
                  outlined
                  prepend-inner-icon="fa-file"
                  append-outer-icon="fa-plus"
                  @click:append-outer="doStuffWithSelectedValue" // do stuff with value from parent v-select
                ></v-select>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>

  methods: {
    doStuffWithSelectedValue(s) {
      // how do I know which v-select icon was clicked and it's value?
    },
  },

  data() {
    return {
      items: [
        { name: "Do first task", value: "FIRST_ITEM" },
      ],
      cards: [
        {
          dateCreated: "2022-02-02T14:21:37.543Z",
          name: "First card",
          id: "FIRST_CARD_ID",
        },
      ],
    };
  },

Answer 1

The + element is inside v-for. That means you have access to the current object. So, if you have v-for="card in cards", you can access card.id where you initialize the click listener - @click="doStuffWithSelectedValue" ---> You can change that line to @click="doStuffWithSelectedValue(card.id)" and the use it as parameter inside method's declaration.