我有一个表(VDataTable),对于每一行(person),都有一个v-select(action),所以我不能得到我为那个人选择的操作,因为v-select是迭代的,我不知道如何做到这一点。
<VDataTable class="table" :headers="headers" :items="dataRef" :items-per-page="10" height="300"
fixed-header>
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
</div>
</div>
</template>
<template #item.action="{ item }">
<!-- <AppSelect :items="actionOptions" placeholder="Action" v-model="item.selectedAction" :key="item.id" /> -->
<v-select clearable :items="actionOptions" v-model="item.selectedAction"></v-select>
</template>
</VDataTable>
字符串
这里有一个AI答案:
watch(dataRef.value.participants, (newParticipants, oldParticipants) => {
newParticipants.forEach((newParticipant, index) => {
const oldParticipant = oldParticipants[index];
if (newParticipant.selectedAction !== oldParticipant.selectedAction) {
console.log(`Participant ${newParticipant.name} selected ${newParticipant.selectedAction}`);
}
});
}, { deep: true });
型
这里是数据
{
"title": "FitPal",
"description": "FitPal is a cutting-edge mobile application designed to revolutionize your fitness journey. Whether you're a seasoned fitness enthusiast or just starting, FitPal is your ultimate companion for achieving your health and wellness goals.",
"point": 10,
"starting_date": "2023-10-10",
"ending_date": "2023-12-10",
"remain": 10,
"participants": [
{"id": 0, "name": "John Doe", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 1, "name": "Jane Smith", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 2, "name": "Bob Johnson", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 3, "name": "Alice White", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 4, "name": "Eve Black", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 5, "name": "John Doe", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 6, "name": "Jane Smith", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 7, "name": "Bob Johnson", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 8, "name": "Alice White", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
{"id": 9, "name": "Eve Black", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" }
]
}
型
这就是
const actionOptions = ["Waiting", "Testing", "Done"];
型
1条答案
按热度按时间1dkrff031#
在VSelect上设置一个
@input
处理程序,它在每次选择操作时运行。您可以将person作为参数传递沿着:字符串