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",
},
],
};
},
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.